CSS3 实现图形下落动画效果
发布时间:2020-11-13 17:22:34 作者:mariaskare 我要评论
这篇文章主要介绍了CSS3 实现图形下落动画效果,帮助大家更好的理解和制作CSS3特效,美化自身网页,感兴趣的朋友可以了解下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
先看效果
实现代码
1 2 3 4 5 6 | < div class = "box box1" ></ div > < div class = "box box2" ></ div > < div class = "box box3" ></ div > < div class = "box box4" ></ div > < div class = "box box5" ></ div > < div class = "box box6" ></ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | * { margin : 0 ; padding : 0 ; box-sizing: border-box; } body { width : 100% ; height : auto ; background : #f90 ; overflow : hidden ; } .box { width : 50px ; height : 50px ; background : #f70 ; transform: rotate( 45 deg); position : absolute ; box-shadow: 2px 2px 3px rgba( 0 , 0 , 0 , 0.3 ); } .box 1 { left : calc( 50% - 25px ); top : calc( 100% - 75px ); animation: box 1 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 2 s 1 ; } .box 2 { left : calc( 50% - 65px ); top : calc( 100% - 115px ); animation: box 2 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 2.5 s 1 ; } .box 3 { left : calc( 50% + 15px ); top : calc( 100% - 115px ); animation: box 3 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 3 s 1 ; } .box 4 { left : calc( 50% + 55px ); top : calc( 100% - 155px ); animation: box 4 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 3.5 s 1 ; } .box 5 { left : calc( 50% - 105px ); top : calc( 100% - 155px ); animation: box 5 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 4 s 1 ; } .box 6 { left : calc( 50% - 25px ); top : calc( 100% - 155px ); animation: box 6 cubic-bezier( 1 , 0 , 0.45 , 1.4 ) 4.5 s 1 ; } @keyframes box 1 { from { top : -100px ; } to { top : calc( 100% - 75px ); } } @keyframes box 2 { from { top : -100px ; } to { top : calc( 100% - 115px ); } } @keyframes box 3 { from { top : -100px ; } to { top : calc( 100% - 115px ); } } @keyframes box 4 { from { top : -100px ; } to { top : calc( 100% - 155px ); } } @keyframes box 5 { from { top : -100px ; } to { top : calc( 100% - 155px ); } } @keyframes box 6 { from { top : -100px ; } to { top : calc( 100% - 155px ); } } |
以上就是CSS3 实现图形下落动画效果的详细内容,更多关于CSS3 图形下落的资料请关注脚本之家其它相关文章!
相关文章
- 一组纯css3加载图标动画特效代码大全是一款8种不同效果的loading加载动画,基于css3 keyframes属性制作的。2020-11-09
- 这篇文章主要介绍了CSS3制作3D立方体loading特效的示例,帮助大家更好的理解和使用CSS3特效,美化自身网页,感兴趣的朋友可以了解下2020-11-09
- 这篇文章主要介绍了纯css3实现横向无限滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-11-06
- 这篇文章主要介绍了CSS3实现莲花绽放得动画效果,帮助大家更好得理解和制作CSS特效,美化自身网页,感兴趣的朋友可以了解下2020-11-06
- 这篇文章主要介绍了CSS3制作圆形滚动进度条动画的示例,帮助大家制作CSS3特效,美化自身网页,感兴趣的朋友可以了解下2020-11-05
- 这篇文章主要介绍了一篇文章带你学习CSS3图片边框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-11-04
- 是一段基于css3 transform属性制作的绿色导航栏鼠标悬停3D翻转切换特效代码,非常有意思,欢迎有兴趣的朋友前来下载使用2020-11-04
- 这篇文章主要介绍了CSS3如何实现时间轴特效,帮助大家更好的理解和制作css3特效,美化自身网页,感兴趣的朋友可以了解下2020-11-02
- 这篇文章主要介绍了CSS3制作皮卡丘动画壁纸的示例,帮助大家更好的理解和制作CSS3特效,感兴趣的朋友可以了解下2020-11-02
- 这篇文章主要介绍了background属性的8个属性值(面试题),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-11-02
最新评论