mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 04:23:17 +08:00
图鸟UI V1.0.0 版本提交
This commit is contained in:
JaylenTech
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="template-hollow">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-xl">
|
||||
<view class="justify-content-item" style="margin-top: 50rpx;">
|
||||
<view class="tn-radius tn-margin-bottom-xl">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
|
||||
</view>
|
||||
<view class="tn-radius tn-margin-bottom">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-radius tn-margin-bottom-xl">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
|
||||
</view>
|
||||
<view class="tn-radius tn-margin-bottom">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item" style="margin-top: 50rpx;">
|
||||
<view class="tn-radius tn-margin-bottom-xl">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
|
||||
</view>
|
||||
<view class="tn-radius tn-margin-bottom">
|
||||
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
|
||||
<view class="image-hollow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-backgroup">
|
||||
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
<view class="hollow">
|
||||
<view class="tn-text-xxl">
|
||||
<text class="">Hi，</text>
|
||||
<open-data type="userNickName"></open-data>
|
||||
</view>
|
||||
<view class="tn-text-xl tn-padding-top">
|
||||
技术的友情，有你真好
|
||||
</view>
|
||||
<view class="tn-text-xl tn-padding-top">
|
||||
TnUI，感谢一路陪伴与支持
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateHollow',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 背景图 start */
|
||||
.bottom-backgroup {
|
||||
height: 700rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
width: 100%;
|
||||
height: 3373rpx;
|
||||
// z-index: -1;
|
||||
}
|
||||
}
|
||||
/* 背景图 end */
|
||||
|
||||
/* 镂空 start*/
|
||||
.hollow {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
width: 87%;
|
||||
padding: 30rpx;
|
||||
margin: 0 6.5%;
|
||||
top: 180rpx;
|
||||
font-weight: bold;
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #000;
|
||||
border-radius: 20rpx;
|
||||
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
/* 效果布局 start*/
|
||||
.image-hollow{
|
||||
width: 200rpx;
|
||||
height: 400rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="bg-contaniner">
|
||||
</view>
|
||||
|
||||
<view class="container-content hex-border">
|
||||
<view class="hexagons">
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
<view class="hexagon"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 移动背景部分 */
|
||||
.bg-contaniner {
|
||||
position: fixed;
|
||||
top: -0rpx;
|
||||
left: -300rpx;
|
||||
--text-color: hsl(0 95% 60%);
|
||||
--bg-color: hsl(0 0% 100%);
|
||||
--bg-size: 200px;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
/* grid-template-areas: "body"; */
|
||||
overflow: hidden;
|
||||
font-family: "Dela Gothic One", sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-contaniner::before {
|
||||
--size: 150vmax;
|
||||
|
||||
grid-area: body;
|
||||
content: "";
|
||||
inline-size: var(--size);
|
||||
block-size: var(--size);
|
||||
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
|
||||
background-size: var(--bg-size);
|
||||
background-repeat: repeat;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.25;
|
||||
animation: bg 6s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bg-contaniner::before {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg {
|
||||
to {
|
||||
background-position: 0 calc(var(--bg-size) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 加载部分 */
|
||||
.components-anloading {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
|
||||
}
|
||||
|
||||
.hex-border {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border: 2px solid rgba(235, 237, 241, 0.8);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.hex-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
clip-path: inset(0px 135px 135px 0px);
|
||||
-webkit-clip-path: inset(0px 135px 135px 0px);
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
animation: rotateSmall 2s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hex-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
height: 174px;
|
||||
border: 2px solid #F4B4C4;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
animation: rotateLarge 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
padding: 5%;
|
||||
top: 30px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 23px;
|
||||
background-color: #F4B4C4;
|
||||
transform: scale(1.02);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11.5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 11.5px solid #F4B4C4;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(1) {
|
||||
animation: animateHex 3s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(2) {
|
||||
left: 53px;
|
||||
animation: animateHex 3s 0.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(3) {
|
||||
left: -13px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(4) {
|
||||
left: 31px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 1.2s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(5) {
|
||||
left: 75px;
|
||||
top: 46px;
|
||||
animation: animateHex 3s 0.4s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(6) {
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.8s infinite;
|
||||
}
|
||||
|
||||
.hexagon:nth-child(7) {
|
||||
left: 53px;
|
||||
top: 84px;
|
||||
animation: animateHex 3s 0.6s infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateSmall {
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLarge {
|
||||
0% {
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: inset(0px 150px 150px 0px);
|
||||
-webkit-clip-path: inset(0px 150px 150px 0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
-webkit-clip-path: inset(0px 30px 30px 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animateHex {
|
||||
0% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
20%,
|
||||
50% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="template-particle">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
|
||||
const Point = class {
|
||||
constructor(x, y) {
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.r = 1 + Math.random() * 2
|
||||
this.sx = Math.random() * 2 - 1
|
||||
this.sy = Math.random() * 2 - 1
|
||||
}
|
||||
|
||||
draw(ctx) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
move(w, h) {
|
||||
this.x += this.sx
|
||||
this.y += this.sy
|
||||
if (this.x > w || this.x < 0) this.sx = -this.sx
|
||||
if (this.y > h || this.y < 0) this.sy = -this.sy
|
||||
}
|
||||
|
||||
drawLine(ctx, p) {
|
||||
const dx = this.x - p.x
|
||||
const dy = this.y - p.y
|
||||
const d = Math.sqrt(dx * dx + dy * dy)
|
||||
if (d < 100) {
|
||||
var alpha = (100 - d) / 300 * 1
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.x, this.y)
|
||||
ctx.lineTo(p.x, p.y)
|
||||
ctx.closePath()
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
|
||||
ctx.strokeWidth = 1
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sysinfo = uni.getSystemInfoSync()
|
||||
const w = 400
|
||||
const h = 1000
|
||||
|
||||
export default {
|
||||
name: 'TemplateParticle',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
ctx: null,
|
||||
screenWidth: sysinfo.screenWidth,
|
||||
screenHeight: sysinfo.screenHeight,
|
||||
timer: null,
|
||||
points: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.from = options.from || ''
|
||||
|
||||
for (let i = 0; i < 80; i++) {
|
||||
this.points.push(new Point(Math.random() * w, Math.random() * h))
|
||||
}
|
||||
this.ctx = uni.createCanvasContext('star_canvas')
|
||||
// console.log(points)
|
||||
|
||||
this.gameloop() //进行
|
||||
// this.ctx.setFillStyle('red')
|
||||
// this.ctx.fillRect(200, 300, 50, 50)
|
||||
// this.ctx.draw()
|
||||
},
|
||||
onUnload() {
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**粒子进行*/
|
||||
gameloop() {
|
||||
this.timer = setTimeout(this.gameloop, 100);
|
||||
// console.log('gameloop')
|
||||
this.paint();
|
||||
},
|
||||
/**清空画布*/
|
||||
paint() {
|
||||
this.ctx.clearRect(0, 0, w, h)
|
||||
for (var i = 0; i < this.points.length; i++) {
|
||||
this.points[i].move(w, h)
|
||||
this.points[i].draw(this.ctx)
|
||||
for (var j = i + 1; j < this.points.length; j++) {
|
||||
this.points[i].drawLine(this.ctx, this.points[j])
|
||||
}
|
||||
}
|
||||
this.ctx.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.template-particle {
|
||||
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
|
||||
background: linear-gradient(90deg, #892FE8, #3D7EFF);
|
||||
min-height: 100vh
|
||||
}
|
||||
.template-particle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
|
||||
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
|
||||
mask-image: linear-gradient(to bottom, transparent, black);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
|
||||
background: linear-gradient(90deg, #E72F8C, #892FE8);
|
||||
}
|
||||
|
||||
.mycanvas {
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="template-photo">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="slideshow">
|
||||
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
|
||||
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplatePhoto',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-photo {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 相册 start*/
|
||||
.slideshow {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slideshow-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: no-repeat 50% 50%;
|
||||
background-size: cover;
|
||||
-webkit-animation-name: kenburns;
|
||||
animation-name: kenburns;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-duration: 16s;
|
||||
animation-duration: 16s;
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.slideshow-image:nth-child(1) {
|
||||
-webkit-animation-name: kenburns-1;
|
||||
animation-name: kenburns-1;
|
||||
z-index: 3;
|
||||
}
|
||||
.slideshow-image:nth-child(2) {
|
||||
-webkit-animation-name: kenburns-2;
|
||||
animation-name: kenburns-2;
|
||||
z-index: 2;
|
||||
}
|
||||
.slideshow-image:nth-child(3) {
|
||||
-webkit-animation-name: kenburns-3;
|
||||
animation-name: kenburns-3;
|
||||
z-index: 1;
|
||||
}
|
||||
.slideshow-image:nth-child(4) {
|
||||
-webkit-animation-name: kenburns-4;
|
||||
animation-name: kenburns-4;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes kenburns-1 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
1.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2117647059);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kenburns-1 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
1.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2117647059);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-2 {
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-2 {
|
||||
23.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
26.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-3 {
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-3 {
|
||||
48.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
51.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes kenburns-4 {
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes kenburns-4 {
|
||||
73.4375% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
76.5625% {
|
||||
opacity: 1;
|
||||
}
|
||||
98.4375% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* 相册 end*/
|
||||
</style>
|
||||
Reference in New Issue
Block a user