送你一朵小红花，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测试和开发

查看全文

相关阅读:
windows快捷键十八式（win10）
解决滚动条突然出现导致的页面错位问题
 用命令行撤销工作区的所有更改（修改文件&&新增文件）
用animation的steps属性制作帧动画
 配置Gitlab pages和Gitlab CI
zookeeper中的分布式一致性协议
 kafka消息的处理机制（五）
Paxos算法原理
 kafka同步异步消费和消息的偏移量（四）
kafka客户端和服务端开发(三)

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

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

视频：

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