利用css代码实现纸飞机效果实例源码
发布时间:2016-12-19 16:17:28 作者:ToyLevom 我要评论
这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果,实现后效果非常不错,文中给出了详细的实例代码,大家可以参考借鉴,下面来一起看看吧。
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
实现效果图如下:
实例代码如下:
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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >纸飞机</ title > < style > .wrap { position: relative; display: inline-block; width: 300px; height: 120px; -webkit-animation: fly 6s; -moz-animation: fly 6s; -o-animation: fly 6s; animation: fly 6s;: } .triangle1 { /*黄色三角形*/ position: absolute; top: 50px; left: 8px; height: 0; width: 0; border-left: 100px solid rgba(255, 255, 255, 0); border-right: 180px solid rgba(255, 255, 255, 0); border-bottom: 24px solid #f09c18; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } .triangle1:after { /*红色边线*/ position: absolute; left: -100px; content: ''; display: block; width: 280px; height: 24px; border-bottom: 1px solid red; } .triangle2 { /*绿色三角形*/ position: absolute; top: 39px; left: 66px; height:0; width: 0; border-left: 40px solid rgba(255, 255, 255, 0); border-right: 180px solid rgba(255, 255, 255, 0); border-top: 24px solid #07d362; -webkit-transform: rotate(5.2deg); -moz-transform: rotate(5.2deg); -ms-transform: rotate(5.2deg); -o-transform: rotate(5.2deg); transform: rotate(5.2deg); } .triangle2:after { /*黄色边线*/ position: absolute; top: -24px; left: -40px; content: ''; display: block; width: 220px; height: 24px; border-top: 1px solid yellow; } .triangle3 { /*黑色三角形*/ position: absolute; top: 68px; left: 100px; height: 0; width: 0; border-left: 6px solid rgba(255, 255, 255, 0); border-right: 100px solid rgba(255, 255, 255, 0); border-bottom: 12px solid #2e302c; -webkit-transform: rotate(-16.8deg); -moz-transform: rotate(-16.8deg); -ms-transform: rotate(-16.8deg); -o-transform: rotate(-16.8deg); transform: rotate(-16.8deg); } @keyframes fly { /*定义动画*/ 0% { top: 0; left: 0; } 5% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } 50% { top: 200px; left: 800px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } 55% { -webkit-transform: rotate(170deg) rotateX(180deg); -moz-transform: rotate(170deg) rotateX(180deg); -ms-transform: rotate(170deg) rotateX(180deg); -o-transform: rotate(170deg) rotateX(180deg); transform: rotate(170deg) rotateX(180deg); } 100% { top: 400px; left: 0; -webkit-transform: rotate(170deg) rotateX(180deg); -moz-transform: rotate(170deg) rotateX(180deg); -ms-transform: rotate(170deg) rotateX(180deg); -o-transform: rotate(170deg) rotateX(180deg); transform: rotate(170deg) rotateX(180deg); } } </ style > </ head > < body > < div class = "wrap" > < div class = "triangle1" ></ div > < div class = "triangle2" ></ div > < div class = "triangle3" ></ div > </ div > </ body > </ html > |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
相关文章
- 这篇文章通过纯CSS代码写了个书签效果,实现后的书签效果很漂亮,文中给出了完整的示例代码,实现的代码也很简单,很方便大家理解和学习,有需要的朋友们可以参考学习,下2016-12-15
- 这是一款基于纯css3实现的圆形从中心向四周扩散动画效果源码。画面上的圆形呈现出周期性的向四周扩散显示的动画效果。该特效完全采用纯css3实现,没有引入任何外部图形元素2016-12-12
- 本篇文章主要介绍了使用CSS3实现一个3D相册效果,小编觉得不错。这里整理了详细的代码,有需要的小伙伴可以参考下。2016-12-03
- 纯CSS3实现鼠标悬停卡片翻转切换特效源码是一款鼠标移到图片上面翻转切换展示,同时文字框慢慢滑动居中。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用2017-02-23
- 最近在做项目的时候,发现文字下方有个波浪线,寻思着,能不能用css来实现,减少资源,遂参考一些资料,后来真的实现了。所以就有了这篇文章了,本文详细的介绍了利用CSS32016-11-20
- 这篇文章主要为大家详细介绍了CSS3 2D模拟实现摩天轮旋转效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-11-16
- 这是一款css3基于svg绘制的唐老鸭图片样式效果源码。完全采用svg技术实现,没有引入任何外部图形元素与js脚本元素2016-11-07
- 这篇文章通过实例代码给大家主要介绍了,如何利用CSS3实现同时执行倾斜和旋转的动画效果,文中给出了完整的实例代码,大家直接运行就可以看到效果,有需要的朋友们可以参考2016-10-27
- CSS3实现个性可爱的甜品店动画幻灯片切换特效源码是一款个性可爱的动画幻灯片切换代码。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用2016-10-26
- 这篇文章给大家介绍的是,利用CSS3实现当点击按钮的时候,按钮的背景是渐变动画的效果,实现后的效果非常好,开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受,感2016-10-19
最新评论