这篇“css3如何实现围绕圆心公转”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS3如何实现围绕圆心公转”文章吧。css
这篇“css3如何实现围绕圆心公转”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS3如何实现围绕圆心公转”文章吧。
css3实现围绕圆心公转的方法：1、创建一个html示例文件；2、定义一个div；3、通过“.out {border-radius: 150px;background-color: sandybrown;...”属性设置外层圆；4、使用animation和transfORM等属性定义基点并实现围绕圆心公转即可。
效果如图
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta Http-equiv="X-UA-Compatible" content="ie=edge"> <title>公转不自转</title> <style> .out { margin-top: 200px; margin-left: 200px; position: relative; height: 300px; width: 300px; border-radius: 150px; background-color: sandybrown; box-shadow: 0 0 23px; } .cover { display: inline-block; width: 50px; height: 50px; position: absolute; transform-origin: 150px 150px; animation: smile linear 5s infinite; background-color: springgreen; } img { width: 50px; height: 50px; animation: smile reverse linear 5s infinite; } @keyframes smile { to { transform: rotateZ(360deg); } } .out span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; } </style></head><body> <div> <div> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1577100031&di=7445f215ef1f860d45fd93be22b52f57&src=http://git.oschina.net/uploads/group/110103951448978.jpg" alt=""> </div> <span>和蔼的笑脸</span> </div></body></html>
以上就是关于“css3如何实现围绕圆心公转”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。
--结束END--
本文标题: css3如何实现围绕圆心公转
本文链接: https://lsjlt.com/news/348924.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0