送你一朵小红花，CSS实现一朵旋转的小红花

zoukankan html css js c++ java

送你一朵小红花，CSS实现一朵旋转的小红花

此文转载自：https://blog.csdn.net/qq_23853743/article/details/112264162#commentBox

送你一朵小红花，愿你勇敢的面对生活中的苦难，不要放弃爱与希望，蓝天白云，定会如期而至。

视频：

B站视频链接：https://www.bilibili.com/video/BV1xX4y1M7yM

<p>送你一朵小红花，CSS实现一朵旋转的小红花</p> </div> <h3>HTML</h3> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>送你一朵小红花：公众号AlbertYang</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div class="box">  <div class="flower">  <div class="petal" style="--x:0"></div> <div class="petal" style="--x:1"></div> <div class="petal" style="--x:2"></div> <div class="petal" style="--x:3"></div> <div class="petal" style="--x:4"></div> <div class="petal" style="--x:5"></div>  <div class="circle"></div> </div> </div> </body> </html> </code></pre> <h3>CSS</h3> <pre><code class="language-css">/* 清除浏览器设置的默认边距，使边框和内边距的值包含在元素的width和height内 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 使用flex布局，让内容垂直和水平居中 */ .box { display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* 花朵 */ .flower { position: relative; 80px; height: 80px; transform-origin: 100% 100%; animation: rotate 3s linear infinite; } /* 花瓣 */ .petal { display: block; /* 花瓣的宽高等于花朵的宽高 */ 80px; height: 80px; background: red; border-radius: 0 70px; position: absolute; /* 让不同的花瓣旋转为花朵 */ transform-origin: 100% 100%; transform: rotate(calc(var(--x) * 60deg)); } /* 花心 */ .circle { 100px; height: 100px; position: absolute; background: #fff200; border-radius: 50%; left: 30px; top: 30px; box-shadow: 0 0 50px yellow; background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b); } /* 花朵旋转动画 */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/de5bd36dfdddc3ba19086a5b531999c2.gif"/></p> <p>今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，<strong><span style="color:#f33b45;">如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！</span></strong></p> </div> </div>

更多内容详见微信公众号：Python测试和开发

查看全文

相关阅读:
我的ZigBee学习之路
 php form表单post提交获取不到数据，而使用get提交能获取到数据的解决办法
 Mac phpstorm破解版安装（简单，有效）
Mac下phpstorm 浏览器出现 502 bad gateway 解决办法
 LayUI之table数据表格获取行、行高亮等相关操作
 钉钉自定义机器人配合SVN钩子事件进行消息的推送实践
 电脑无故失去焦点，罪魁祸首是谁？终极解决办法
 Java实现的电脑已连接WiFi热点的导入导出小工具 wifi备份
 C# DataGridView自定义分页控件
 C# DataGridView控件禁止拷贝数据

原文地址：https://www.cnblogs.com/phyger/p/14251976.html

送你一朵小红花，CSS实现一朵旋转的小红花

视频：

更多内容详见微信公众号：Python测试和开发