CSS3 制做绽开的荷花选用实际效果叠加完成

日期:2021-03-10 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

这实际效果看起来挺炫,但基本原理其实不繁杂,能完成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⑵ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(45deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑶ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(65deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑷ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(85deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑸ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(105deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑹ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(165deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑺ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(185deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑻ {
% {
transform: rotate(135deg);
}
% {
transform: rotate(205deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show⑼ {
% {
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⑵ 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show⑶ 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show⑷ 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show⑸ 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show⑹ 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show⑺ 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show⑻ 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show⑼ 6s ease-in-out infinite;
}

演试:

提醒:您能够先改动一部分编码再运作