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

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

视频：

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

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

HTML

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;width: 80px;height: 80px;transform-origin:  100% 100%;animation: rotate 3s linear infinite;
}
/* 花瓣 */
.petal {display: block;/* 花瓣的宽高等于花朵的宽高 */width: 80px;height: 80px;background: red;border-radius: 0 70px;position: absolute;/* 让不同的花瓣旋转为花朵 */transform-origin: 100% 100%;transform: rotate(calc(var(--x) * 60deg));
}
/* 花心 */
.circle {width: 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);}
}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！