css3实现一些好看的动画效果

最新推荐文章于 2024-07-22 19:12:50 发布

兔子敲代码

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量1.6k

点赞数 4

本文链接：https://blog.csdn.net/qq_38499671/article/details/109238072

版权

我们知道css3动画可以实现很漂亮的动画效果，例如：水纹波动，电池充电...，那么下面看看如何实现的

1.水纹波动效果实现：

html:

<div class="sea">
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
</div>

css:

.sea {
            width: 300px;
            height: 300px;
            background-color: whitesmoke;
            background-image: linear-gradient(darkblue, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5));
            border-radius: 5px;
            box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        .sea .wave {
            position: absolute;top: -250px;left: -100px;width: 500px;
            height: 500px;
            background: deepskyblue;
            border-radius: 43%;
            filter: opacity(0.4);
            
            animation: drift linear infinite;
            transform-origin: 50% 48%;
        }
        .sea .wave:nth-of-type(1) {animation-duration: 5s;}
        .sea .wave:nth-of-type(2) {animation-duration: 7s;}
        .sea .wave:nth-of-type(3) {animation-duration: 9s;background-color: orangered;filter: opacity(0.1);}
        @keyframes drift { from {transform: rotate(360deg);}
        }

2.电池充电效果

html:

<div class="battery">
<div class="batbox">
	<div class="batteryVal">
		<div class="wave">
			<span></span> <span></span> <span></span> 
		</div>
	</div>
</div>
</div>

CSS:

.battery{width: 150px;height: 250px;background: #fff;border-radius: 8px;border: 1px solid #eee;margin: 100px auto 0 auto;position: relative;}
.battery:before{content: "";width: 30px;height: 20px;display: block;background: #eee;position: absolute;left: 60px;top: -20px;z-index: 9;border-radius: 6px 6px 0 0;}
.batbox{width: 150px;height: 250px;overflow: hidden;display: flex;align-items: flex-end;}
.batteryVal{width: 100%;height: 0;margin-top: 150px;position: relative;background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);animation: bty ease-in-out 5s infinite;border-radius:  0 0 6px 6px;}
.wave{width: 100%;height: 150px;border-radius: 20px;position: relative;left: 0;top: -150px;z-index: 1;}
.wave span{width: 300px;height:350px;display: block;border-radius: 20% 10%;animation: waves ease-in-out 6s infinite;position: absolute;top: -140px;left: -50px;}
.wave span:nth-of-type(1){background: rgba(255,255,255,1);transition-delay: 0;border-radius: 30%;}
.wave span:nth-of-type(2){background: rgba(255,255,255,.25);transition-delay: 3;border-radius: 48%;transform: rotate(-320deg)}
.wave span:nth-of-type(3){background: rgba(255,255,255,.45);transition-delay: 7;border-radius: 30%;transform: rotate(40deg)}
@keyframes bty{
0{
	height: 0;
	filter: hue-rotate(14deg);
}
25%{
	height: 30%;
        filter: hue-rotate(45deg);
}
50%{
	height: 60%;
	filter: hue-rotate(75deg);
}
100%{
	height: 100%;
	filter: hue-rotate(80deg);
}
}
@keyframes waves{
	100%{
	transform: rotate(720deg);
	}
}

3.元素临近相融合特效：

html:

<div class="box">
			<div class="ball1"></div>
			<div class="ball2"></div>
</div>

css:

.box{width: 300px;height: 100px;border: 1px solid #eee;position: relative; filter: contrast(15);background: #fff;}
.ball1{width: 60px;height: 60px;background: #333;border-radius: 50%;position:absolute ;left: 0;top: 20px;animation: lef ease-out 4s infinite;  filter: blur(6px);}
.ball2{width: 30px;height: 30px;background: #0000FF;border-radius: 50%;position:absolute ;right: 0;top: 35px;animation: rig ease-out 4s infinite;filter: blur(6px);}
		
@keyframes lef{
	0%{
	left: 0;
	}
	100%{
	left: 50%;
	}
}	
@keyframes rig{
	0%{
	right: 0;
	}
	100% {
	right: 50%;
	}
}

细节注意：融合元素父级使用滤镜：contrast, 并且设置一个背景色(没有背景元素有模糊效果)

融合子元素使用blur滤镜