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

举报
AlbertYang 发表于 2021/02/03 00:00:55 2021/02/03
【摘要】 送你一朵小红花,愿你勇敢的面对生活中的苦难,不要放弃爱与希望,蓝天白云,定会如期而至。 视频: B站视频链接:https://www.bilibili.com/video/BV1xX4y1M7yM 送你一朵小红花,CSS实现一朵旋转的小红花 HTML <!DOCTYPE html><html lang="en"> <head&...

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

视频:

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

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

HTML


  
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>送你一朵小红花:公众号AlbertYang</title>
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <!-- 容器 -->
  11. <div class="box">
  12. <!-- 花朵 -->
  13. <div class="flower">
  14. <!-- 花瓣 -->
  15. <div class="petal" style="--x:0"></div>
  16. <div class="petal" style="--x:1"></div>
  17. <div class="petal" style="--x:2"></div>
  18. <div class="petal" style="--x:3"></div>
  19. <div class="petal" style="--x:4"></div>
  20. <div class="petal" style="--x:5"></div>
  21. <!-- 花心 -->
  22. <div class="circle"></div>
  23. </div>
  24. </div>
  25. </body>
  26. </html>

CSS


  
  
  1. /* 清除浏览器设置的默认边距,
  2. 使边框和内边距的值包含在元素的width和height内 */
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. }
  8. /* 使用flex布局,让内容垂直和水平居中 */
  9. .box {
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. min-height: 100vh;
  14. }
  15. /* 花朵 */
  16. .flower {
  17. position: relative;
  18. width: 80px;
  19. height: 80px;
  20. transform-origin: 100% 100%;
  21. animation: rotate 3s linear infinite;
  22. }
  23. /* 花瓣 */
  24. .petal {
  25. display: block;
  26. /* 花瓣的宽高等于花朵的宽高 */
  27. width: 80px;
  28. height: 80px;
  29. background: red;
  30. border-radius: 0 70px;
  31. position: absolute;
  32. /* 让不同的花瓣旋转为花朵 */
  33. transform-origin: 100% 100%;
  34. transform: rotate(calc(var(--x) * 60deg));
  35. }
  36. /* 花心 */
  37. .circle {
  38. width: 100px;
  39. height: 100px;
  40. position: absolute;
  41. background: #fff200;
  42. border-radius: 50%;
  43. left: 30px;
  44. top: 30px;
  45. box-shadow: 0 0 50px yellow;
  46. background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b);
  47. }
  48. /* 花朵旋转动画 */
  49. @keyframes rotate {
  50. 0% {
  51. transform: rotate(0deg);
  52. }
  53. 100% {
  54. transform: rotate(360deg);
  55. }
  56. }

今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。有什么不明白的地方欢迎给我留言,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

文章来源: albertyang.blog.csdn.net,作者:Albert Yang,版权归原作者所有,如需转载,请联系作者。

原文链接:albertyang.blog.csdn.net/article/details/112264162

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。