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> </<a href="https://www.rokub.com/category/html" title="html">html</a>>

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

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

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

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

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

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

You may also like...

【理解】前端webpack开发流程

前端工具subline 3 LESS、SASS、SCSS高亮插件、提示插件

前端跨域知识总结|网站前端开发_前端开发者

发表评论 取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复