CSS3心形效果代码实例
分类:实例代码
CSS3心形效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它利用css3实现了心形效果,并且还能够跳动。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #myheart { position: relative; width: 150px; height: 220px; } #myheart:before,#myheart:after { position: absolute; left: 100px; background: red; height: 160px; width: 100px; content: ""; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #myheart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heart { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(1); } } .myheart { position: absolute; top: 40%; left: 40%; animation: heart 1.5s linear infinite; } </style> </head> <body> <div class="myheart"> <div id="myheart"></div> </div> </body> </html>
CSS3心形效果代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS3心形效果代码实例就介绍到这了。