CSS3日食效果代码
分类:实例代码
CSS3日食效果代码属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用css3实现了日食效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } body { background: #222; } .sky { position: relative; padding-top: 15px; width: 800px; height: 600px; margin: 150px auto; } .moon { margin: 0 auto; width: 200px; height: 200px; background-color: #f3f3f3; border-radius: 50%; box-shadow:6px 6px 10px #666, 6px -6px 10px #666, -6px 6px 10px #666, -6px -6px 10px #666; } .dog { position: absolute; top: 15px; left: 90px; width: 200px; height: 200px; background-color: #222; border-radius: 50%; animation: dogEatMoon 8s ease-out infinite; } @keyframes dogEatMoon { 0% { left: 90px; } 35% { left: 300px; } 55% { left: 300px; } 100% { left: 520px; } } </style> </head> <body> <div class="sky"> <div class="moon"></div> <div class="dog"></div> </div> </body> </html>
CSS3日食效果代码,这样的场景在实际项目中还是用的比较多的,关于CSS3日食效果代码就介绍到这了。