CSS3 莲花盛开动画

2021-09-25 03:34:32

See the Pen CSS3 Lotus by haiqing wang (@whqet) onCodePen.

大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。

下面来开工，先看html

<header id="header">
  <hgrounp class="white blank">
    <h1>CSS3制作莲花开放</h1>
  </hgrounp>
</header>
<section class="demo">
  <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 class="leaf"></div>
</section>

利用div.leaf这个DIV来实现叶子。

CSS部分，Less的一些变量和Mixin，主要有opacity、animate和transform。

/*定义变量*/
@leafWidth:150px;
@bgColor:#333;
/*定义Mixins*/
// OPACITY
.opacity(@val){
	opacity:@val;
	@cent:@val*100;
	filter:~"alpha(opacity=@{cent})";
}
// Animations
.animate(@val){
    -webkit-animation: @val;
    -moz-animation: @val;
    -o-animation: @val;
    animation: @val;
}
// Animation Delay
.animate-delay(@val){
    -webkit-animation-delay: @val;
    -moz-animation-delay: @val;
    -o-animation-delay: @val;
    animation-delay: @val;
}
// Transform MIXIN
.transform (@val;@origin:0 0) {
	-webkit-transform: @val;
	-webkit-transform-origin: @origin;
	-moz-transform: @val;
	-moz-transform-origin: @origin;
	-ms-transform: @val;
	-ms-transform-origin: @origin;
	-o-transform: @val;
	-o-transform-origin: @origin;
	transform: @val;
	transform-origin: @origin;
}

然后是布局的CSS

body{
	background-color: @bgColor;
}
.demo{
	width:@leafWidth*1.5;
	height: @leafWidth*1.5;
	margin: 300px auto 0;
	position: relative;
        .transform(rotate(135deg),center center);

	.leaf{
		width: @leafWidth;
		height: @leafWidth;
		border-radius: @leafWidth 0px;
		background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
		.opacity(.5);
		position: absolute;
		margin-top: 400px;
	}
}

这里，使用border-radius将矩形div变成叶子形状，利用linear-gradient实现叶子填充。

然后将叶子位置初始化

@iterations:10;
@degrees:360/@iterations * 1deg;
// Looping generator
.loop (@index) when (@index>0){
	&:nth-child(@{iterations}n + @{index}){
		// Create a skew which is a number of degrees from the root element
		.animate-delay(@index/10 * 1s);
		@rotate:@index*@degrees+180deg;
		.transform(rotate(@rotate), top right);
	}
	.loop((@index - 1));
}

LESS循环遍历.leaf，进行位置初始化，动画延迟设置。

然后定义关键帧动画

@keyframes openAnimate{
	to {
		.transform(rotate(360deg),top right);
	}
}

在.leaf的css里，调用刚刚的遍历循环和动画。

	.leaf{
		width: @leafWidth;
		height: @leafWidth;
		border-radius: @leafWidth 0px;
		background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
		.opacity(.5);
		position: absolute;
		margin-top: 400px;
                //设置动画和遍历
		.animate(openAnimate 6s ease-in-out infinite alternate);
		.loop(@iterations);
	}

完成版的CSS如下所示。

/*定义变量*/
@leafWidth:150px;
@bgColor:#333;
/*定义Mixins*/
// OPACITY
.opacity(@val){
	opacity:@val;
	@cent:@val*100;
	filter:~"alpha(opacity=@{cent})";
}
// Animations
.animate(@val){
    -webkit-animation: @val;
    -moz-animation: @val;
    -o-animation: @val;
    animation: @val;
}
// Animation Delay
.animate-delay(@val){
    -webkit-animation-delay: @val;
    -moz-animation-delay: @val;
    -o-animation-delay: @val;
    animation-delay: @val;
}
// Transform MIXIN
.transform (@val;@origin:0 0) {
	-webkit-transform: @val;
	-webkit-transform-origin: @origin;
	-moz-transform: @val;
	-moz-transform-origin: @origin;
	-ms-transform: @val;
	-ms-transform-origin: @origin;
	-o-transform: @val;
	-o-transform-origin: @origin;
	transform: @val;
	transform-origin: @origin;
}
@iterations:10;
@degrees:360/@iterations * 1deg;
// Looping generator
.loop (@index) when (@index>0){
	&:nth-child(@{iterations}n + @{index}){
		// Create a skew which is a number of degrees from the root element
		.animate-delay(@index/10 * 1s);
		@rotate:@index*@degrees+180deg;
		.transform(rotate(@rotate), top right);
	}
	.loop((@index - 1));
}
@keyframes openAnimate{
	to {
		.transform(rotate(360deg),top right);
	}
}
body{
	background-color: @bgColor;
}
.demo{
	width:@leafWidth*1.5;
	height: @leafWidth*1.5;
	margin: 300px auto 0;
	position: relative;
  .transform(rotate(135deg),center center);

	.leaf{
		width: @leafWidth;
		height: @leafWidth;
		border-radius: @leafWidth 0px;
		background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
		.opacity(.5);
		position: absolute;
		margin-top: 400px;
		.animate(openAnimate 6s ease-in-out infinite alternate);
		.loop(@iterations);
	}
}

好了，整个效果就是这样。

大家可以到我的codepen在线修改、体验，或是下载收藏本效果。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

CSS3 莲花盛开动画

码农公寓

相关文章