css纸飞机效果代码实例
分类:实例代码
分享一段代码实例,它利用css实现了纸飞机效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> div { margin: 40px; float: left; } .plan { position: relative; border-top: 100px solid transparent; border-bottom: 40px solid transparent; border-left: 30px solid cadetblue; transform: rotate(70deg); } .plan:before, .plan:after { content: ''; display: block; position: absolute; border-top: 100px solid transparent; border-left: 40px solid cadetblue; border-right: 80px solid transparent; top: -121px; left: -16px; transform: rotate(-20deg); } .plan:after { border-top: 20px solid cadetblue; border-left: 7px solid transparent; border-right: 7px solid transparent; top: -4px; left: 1px; transform: rotate(-40deg); } </style> </head> <body> <div class="plan"></div> </body> </html>
css纸飞机效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css纸飞机效果代码实例就介绍到这了。
css纸飞机效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。