首屏滑入动效可以参看我的个人主页
代码如下
@-webkit-keyframes huaru01{ 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); } 100% { opacity:1; -webkit-transform:none; transform:none; } } @-webkit-keyframes huaru00{ 0% { opacity:0; } 100% { opacity:0; } } h2.dh001{ -webkit-animation: huaru00 0.4s 0s,huaru01 1s 0.4s ease-out; }
利用animation属性来实现动画,
1.首先动画huaru00先执行,效果为先将目标元素隐藏,延时0秒触发,持续时间为0.4秒。
2.然后动画huaru01延时04秒触发,动画过程1秒,其效果为现实从隐藏且顶部向原位置滑动且不透明度变成1。
这样一来就实现了打开网页,某元素从隐藏到滑入预计位置且完全显示的效果了。
未经允许不得转载:安超峰的网站 » CSS3实现首屏元素滑入动效
隔三差五来一趟,每次都有新气象!
不赖!真的不赖!
天气越来越冷了,躲在家里刷刷博客也挺好!
初来乍到,多多关照!消灭新冠,人人平安!