代码很简单,如下:
@keyframes fade-in { 0% {opacity: 0;}/*初始状态 透明度为0*/ 40% {opacity: 0;}/*过渡状态 透明度为0*/ 100% {opacity: 1;}/*结束状态 透明度为1*/ } @-webkit-keyframes fade-in {/*针对webkit内核*/ 0% {opacity: 0;} 40% {opacity: 0;} 100% {opacity: 1;} } #wrapper { animation: fade-in;/*动画名称*/ animation-duration: 1.5s;/*动画持续时间*/ -webkit-animation:fade-in 1.5s;/*针对webkit内核*/ }
其中 #wrapper 改为你要实现效果的id 或者 class
比如 #main , 用于侧边栏 #sidebar 也可以
#sidebar { animation: fade-in;/*动画名称*/ animation-duration: 1.5s;/*动画持续时间*/ -webkit-animation:fade-in 1.5s;/*针对webkit内核*/ }
淡入时间也可以修改,看注释就明白了。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/1034.html