梅县区住房和城市建设局网站,wordpress忘记后台账号,园林在线设计平台,如何自己学做网站一. 动画分析
年报类型页面的动画都是第一行字体先触发动画 之后第二行字体再出现动画 以此类推
二. 动画写法
1.动画封装
keyframes identifier {0% {opacity: 0;transform: translateY(40px);}100% {opacity: 1;transform: translateY(0);}
}
2. 添加动画
a. 第一行字…一. 动画分析
年报类型页面的动画都是第一行字体先触发动画 之后第二行字体再出现动画 以此类推
二. 动画写法
1.动画封装
keyframes identifier {0% {opacity: 0;transform: translateY(40px);}100% {opacity: 1;transform: translateY(0);}
}
2. 添加动画
a. 第一行字
animation: identifier 1.5s linear 0s;
我们添加这行 css 动画时间1.5s 0s延迟 也就是进页面直接触发
b. 第二行字
opacity: 0;
animation: identifier 1.5s linear 1.5s;
首先我们给它设置隐藏和动画并且延迟1.5s 因为我们要等第一行字的动画效果呈现完 第二行再出来 这里时间大家看着设置 然后用 js 设置延时器
setTimeout(() {this.$refs.xx.style.opacity 1
}, 1500)
c. 第三行字
opacity: 0;
animation: identifier 1.5s linear 3s;
等第二行字的效果呈现完 第三行才出现
setTimeout(() {this.$refs.xx.style.opacity 1
}, 3000)
d. 第n行字
后方以此类推即可
