CSS3 制作绽放的莲花采用效果叠加实现

网页制作 2025/1/11 佚名

3 2 1

这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。
HTML：

复制代码代码如下:
<section class="demo">
<div class="box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</section>

CSS：

复制代码代码如下:
View Code
body {
background-color: #000;
}
.demo {
margin:0px auto;
width: 500px;
}
/*莲花花瓣的容器*/
.box {
position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/
height: 400px;
margin-top:400px
}
/*花瓣进行绝对定位*/
.box .leaf {
position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
margin-top:0px;
width: 200px;
height: 200px;
border-radius: 200px 0px;/*制作花瓣角*/
background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
opacity: .6;
filter:alpha(opacity=50);
transform: rotate(135deg);/*花瓣旋转135deg*/
transform-origin: top right;/*重置花瓣旋转原点，这个很重要*/
}
@keyframes show-2 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(45deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-3 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(65deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-4 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(85deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-5 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(105deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-6 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(165deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-7 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(185deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-8 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(205deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-9 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(225deg);
}
%{
transform: rotate(135deg);
}
}
.leaf:nth-child(1) {
background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
}
.leaf:nth-child(2) {
animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show-9 6s ease-in-out infinite;
}

演示：

<!doctype html><html><head> <meta charset="utf-8"> <title></title>  <meta name="robots" content="noindex, nofollow">  <link rel="canonical" href="http://cssdeck.com/labs/ua52kzsu"> <style>* { margin: 0; padding: 0;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }html, body, iframe {  width: 100%; height: 100%;}body { overflow: hidden; }iframe { border: 0 none; padding-top: 30px; }header {overflow: hidden;}header {  height: 30px;  max-height: 30px;  width: 100%;  position: absolute;  background: #3c404b;  border-bottom: 1px solid #000;}/* Logo */.logo {  width: 60px; float: left;  box-shadow: 8px 20px 18px -2px rgba(0, 0, 0, 0.22);}.logo a {  text-indent: -9999px; display: block;  text-decoration: none;  border: none; outline: none;  background: url(https://dl.dropbox.com/u/26141789/logoTop.png) 50% 50% no-repeat;  height: 30px; width: 60px;}/* Navigation */.top_nav, .extra {  float: left;  padding: 0;  margin: 0;  list-style: none;}.extra { float: right; margin-right: 1px; }.top_nav li, .extra li {  float: left;  position: relative;}.top_nav li a, .extra li a {  height: 30px;  display: block;  text-align: center;  font: 12px/30px "Open Sans", Arial, sans-serif;  color: #efefef;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);  text-decoration: none;  padding: 0 25px;  overflow: hidden;  position: relative;}.top_nav > li > a, .extra > li > a, .logo a {  -webkit-transition: all .3s ease;  -moz-transition: all .3s ease;  transition: all .3s ease;}/* header has overflow: hidden which won't letdropdown appear. So why not use my amazing skillsand write the worst hacks ever! */.top_nav > li > a:before, .extra > li > a:before {  position: absolute;  width: 100%;  content: '';  height: 30px;  box-shadow: 8px 12px 18px -2px rgba(0, 0, 0, 0.22);  top: 0;  left: -100%;}header li.user_menu > a {  padding: 5px 10px 0;  background: #333;}header li:hover > a, header li a:hover, .logo a:hover{  background-color: rgba(0, 0, 0, .5);} </style>  <body><header>  <ul class="extra" style="float: right;">    <li><a href="http://twitter.com/share?text=Full view for &via=cssdeck" target="_blank">Tweet</a></li>    <li><a href="/labs/ua52kzsu/0">Edit in Labs</a></li>  </ul></header><iframesrc="/UploadFiles/2021-03-30/noframe#dontkillanim"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode11')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode11)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode11)">  提示：您可以先修改部分代码再运行</div>

</div>
                                <div class="tags my-2">
                                    <i class="iconfont icon-tags"></i><a href="/NewsPage/1/73517.html" rel="tag" class="tag-%e6%a0%b8%e6%b3%84%e6%bc%8f color-6" title="css3动画,莲花">css3动画,莲花</a> </div>
                                <div class="post-apd">
                                    <strong>标签：</strong><a href="/NewsPage/1/73517.html" title="css3动画,莲花">
                                        <h5>css3动画,莲花</h5>
                                    </a> <Br /></div>
                            </div>
                        </div>
                        <div class="single-top-area text-sm clearfix card mt-4">
                            <div class="card-body">
                                <strong>免责声明：</strong>本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com</a>
                            </div>
                        </div>
                        <div class="near-navigation rounded mt-4 py-2">
                            <div class="nav previous border-right border-color">
                                <a class="near-permalink" href="#">
                                    <span>上一篇</span>
                                    <h4 class="near-title"><a href="/NewsPage/1/73516.html" title="css 英文换行 css(word-wrap/break)使纯英文数字自动换行">css 英文换行 css(word-wrap/break)使纯英文数字自动换行</a></h4>
                                </a>
                            </div>
                            <div class="nav next border-left border-color">
                                <a class="near-permalink" href="#">
                                    <span>下一篇</span>
                                    <h4 class="near-title"><a href="/NewsPage/1/73518.html" title="兼容ie的内阴影和外阴影实现效果及测试代码">兼容ie的内阴影和外阴影实现效果及测试代码</a></h4>
                                </a>
                            </div>
                        </div>
                        
                        <div class="post-apd mt-4">狼山资源网 Copyright www.pvsay.com</div>
                        <div id="comments" class="comments">
                            <h1 id="comments-list-title" class="comments-title h5 mx-1 my-4">
                                <i class="iconfont icon-comment"></i>
                                <span class="noticom">
                                    <a href="/NewsPage/1/73517.html#respond" class="comments-title" title="CSS3 制作绽放的莲花采用效果叠加实现">评论“CSS3 制作绽放的莲花采用效果叠加实现”</a>
                                </span>
                            </h1>
                            <div class="card">
                                <div class="card-body">
                                    <div id="respond_box">
                                        <div id="respond" class="comment-respond">
                                            <div class="visitor-avatar d-flex flex-fill mb-2">
                                                <img class="v-avatar rounded-circle" src="/images/logos.png"><a href="/NewsPage/1/73517.html#Description" title="CSS3 制作绽放的莲花采用效果叠加实现">CSS3 制作绽放的莲花采用效果叠加实现</a>
                                            </div>
                                            <div class="comment-textarea mb-3">
                                                <textarea name="comment" id="comment" class="form-control" placeholder="输入对“CSS3 制作绽放的莲花采用效果叠加实现”评论内容..." tabindex="4" cols="50" rows="3">

暂无“CSS3 制作绽放的莲花采用效果叠加实现”评论...

CSS3 制作绽放的莲花采用效果叠加实现

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

CSS3 制作绽放的莲花采用效果叠加实现

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存