html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span> lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>Document</title><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> div.circle {<br /> height: 50px;<br /> width: 50px;<br /> /* border-radius: 25px; */<br /> background-color: red;<br /> position: absolute;<br /> left: 50%;<br /> top: 50%;<br /> margin-top: -25px;<br /> margin-left: -25px;<br /> animation-duration: 5s;<br /> animation-iteration-count: infinite;<br /> animation-timing-function: linear;<br /> transform-origin: -100px;<br /> animation-name: circle;<br /> }</p> <p>@keyframes circle {<br /> 0% {<br /> transform: rotate(0deg);<br /> }<br /> 50%<br /> {<br /> transform: rotate(-45deg);<br /> }<br /> /* 50%{transform: rotate(-45deg);} */<br /> 100% {<br /> transform: rotate(0deg);<br /> }<br /> }</p> <p> </style><br /> </head><br /> <body><br /> <div class="circle"></div><br /> </body><br /> </html> » 本文来自：前端开发者 » 《CSS3曲线动画（非贝塞尔曲线）》 » 本文链接地址：https://www.rokub.com/8851.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册