css3曲线动画（非贝塞尔曲线）

由前端开发者 · 2018年11月6日15:17:44

摘要：html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&quo……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> div.circle { height: 50px; width: 50px; /* border-radius: 25px; */ background-color: red; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: -100px; animation-name: circle; } @keyframes circle { 0% { transform: rotate(0deg); } 50% { transform: rotate(-45deg); } /* 50%{transform: rotate(-45deg);} */ 100% { transform: rotate(0deg); } } </style> </head> <body> <div class="circle"></div> </body> </html>

» 本文来自：前端开发者 » 《css3曲线动画（非贝塞尔曲线）》

» 本文链接地址：https://www.rokub.com/8851.html

» 您也可以订阅本站：https://www.rokub.com

css3曲线动画（非贝塞尔曲线）

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

css3曲线动画（非贝塞尔曲线）

You may also like...

前端开发百度搜索下拉（功能实现）

前端开发浏览器怎么渲染页面

前端开发模仿知乎注册，登录页

发表评论 取消回复

前端开发者/SEO-技术群/春运抢票群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复