太阳动画
Posted Xiao_Qiu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了太阳动画相关的知识，希望对你有一定的参考价值。
会动的太阳，可爱O(∩_∩)O 纯css制作。。。
源代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul,li,div{ margin: 0; padding: 0; } ul,li{ list-style: none; } .wrap{ width: 400px; height: 300px; margin:50px auto; background: #f4c042; position: relative; } @keyframes sunmove { 0%{top:120px} 3%{top:100px} 97%{top:100px} 100%{top:120px} } .sun{ position: absolute; left: 128px; top:120px; animation:sunmove 5.0s ease .1s infinite; -webkit-animation:sunmove 5.0s ease .1s infinite; } .line{ position: absolute; left: 128px; top: 193px; width: 150px; height: 3px; background: #7a6021; border-radius:1px; } .txt{ position: absolute; left:128px; top: 233px; width: 150px; height: 30px; line-height: 30px; text-align: center; color:#7a6021; font-family:Tahoma, Geneva,sans-serif; font-size: 10px; z-index:110 } .sun1{ width: 90px; height: 90px; border-radius: 50%; background: #f4c042; border:4px solid #7a6021; position: absolute; left: 27px; top: 27px; } .eyes{ width: 6px; height: 6px; border-radius: 100%; background: #7a6021; position: absolute; left:45px; top:80px; animation:suneyes 5.0s ease .1s infinite; -webkit-animation: suneyes 5.0s ease .1s infinite; } .eyesleft{ left:62px; animation:suneyes2 5.0s ease .1s infinite; -webkit-animation: suneyes2 5.0s ease .1s infinite; } @keyframes suneyes { 10%{opacity:1.0;left:45px} 11%{opacity:0;left:45px} 12%{opacity:1.0;left:45px} 22%{opacity:1.0;left:45px} 23%{opacity:0;left:45px} 24%{opacity:1.0;left:45px} 27%{opacity:1.0;left:45px} 28%{opacity:0;left:45px} 29%{opacity:1.0;left:45px} 33%{opacity:1.0;left:90px} 45%{opacity:1.0;left:90px} 46%{opacity:0;left:90px} 47%{opacity:1.0;left:90px} 50%{opacity:1.0;left:90px} 51%{opacity:0;left:90px} 52%{opacity:1.0;left:90px} 55%{opacity:1.0;left:45px} } @keyframes suneyes2 { 10%{opacity:1.0;left:62px} 11%{opacity:0;left:62px} 12%{opacity:1.0;left:62px} 22%{opacity:1.0;left:62px} 23%{opacity:0;left:62px} 24%{opacity:1.0;left:62px} 27%{opacity:1.0;left:62px} 28%{opacity:0;left:62px} 29%{opacity:1.0;left:62px} 33%{opacity:1.0;left:107px} 45%{opacity:1.0;left:107px} 46%{opacity:0;left:107px} 47%{opacity:1.0;left:107px} 50%{opacity:1.0;left:107px} 51%{opacity:0;left:107px} 52%{opacity:1.0;left:107px} 55%{opacity:1.0;left:62px} } .subline{ width: 150px; height: 150px; position: absolute; left:0px; top:0px; transform-origin: 0 0; animation:sunmove1 15.0s ease .1s infinite ; transform-origin: center center; } @keyframes sunmove1 { 0%{transform:rotate(0deg)} 99.99%{transform:rotate(360deg)} 100%{transform:rotate(0deg)} } .subline li{ width: 3px; height: 18px; background: #7a6021; position: absolute; transform-origin: 100% 100%; } .subline li:nth-child(1){ left:73px; top:0px; } .subline li:nth-child(2){ left:115px; top:27px; transform: rotate(45deg); } .subline li:nth-child(3){ left:132px; top:73px; width: 18px; height: 3px; } .subline li:nth-child(4){ left:115px; top:100px; transform: rotate(135deg); } .subline li:nth-child(5){ left:73px; top:132px; } .subline li:nth-child(6){ left:21px; top:115px; transform: rotate(45deg); } .subline li:nth-child(7){ left:0px; top:73px; width: 18px; height: 3px; } .subline li:nth-child(8){ left:21px; top:6px; transform: rotate(135deg); } .yellowbg{ width: 150px; height: 83px; background:#f4c042; display:inline-block; position:absolute; left:128px;top:196px; z-index: 88; } </style> </head> <body> <div class="wrap"> <div class="yellowbg"></div> <div class="sun"> <div class="subline"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="sun1"></div> <div class="eyes"></div> <div class="eyes eyesleft"></div> </div> <div class="line"></div> <div class="txt">SUNRISE</div> </div> </body> </html>
以上是关于太阳动画的主要内容，如果未能解决你的问题，请参考以下文章