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

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

视频：

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

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>

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);}
}

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

送你一朵小红花，CSS实现一朵旋转的小红花相关推荐

微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果
效果图: 这里默认第一个选中点击每个不会改变样式根据index来实现 wxml: 页面class有三目运算 {{item.num}} wxss: _left 蓝色 left 黑色 .box{ wi ...
微信小程序- css相比,wxss区别？小程序关联微信公众号如何确定用户的唯一性？微信小程序中的用户ID(openid和unionid)
1 与css相比, wxss区别? 1) 响应式长度 rpx 2) 样式导入 3) 小程序不支持通配符* *{ width:100rpx; height:100rpx; } 2 小程序关联微信公众号如 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
html的css雪花动效,《前端每日实战》第171号作品：用纯 CSS 绘制一朵美丽的雪花...
昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一.效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 二.源代码下载每日 ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
微信小程序css 华文琥珀_琥珀项目：较小的，面向生产力的Java语言功能
微信小程序css 华文琥珀 Brian Goetz最近的消息欢迎来到琥珀! 介绍Project Amber ( OpenJDK的一部分, 最初于1月提出 ). Goetz通过介绍"欢迎使用A ...
[css] 用css实现一个等腰三角形的小图标
[css] 用css实现一个等腰三角形的小图标 <style>.box{width: 0;height: 0;margin: 100px auto;border-width: 0px 20 ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
用css和HTML做loding小动画
用css和HTML做loding小动画 1.先进行简单的页面布局 1.1 我这里是使用了一个div标签包了两个p标签每个p标签里面又包了四个span标签构建了一个简单的页面搭建其余的用css就可 ...

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

视频：

HTML

CSS

送你一朵小红花，CSS实现一朵旋转的小红花相关推荐

最新文章

热门文章