CSS 3.0结合SVG实现水滴穿透加载动画
Posted aiguangyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 3.0结合SVG实现水滴穿透加载动画相关的知识，希望对你有一定的参考价值。
给大家分享一个用CSS 3.0结合SVG实现一个水滴穿透加载动画，效果如下：
以下是代码实现，欢迎大家复制、粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3.0结合SVG实现水滴穿透加载动画</title>
<style>
:root
--blue: #0a2bc5;
--yellow: #ffcc2f;
body
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
background: #000;
color: var(--blue);
.container
filter: url('#filter');
display: flex;
justify-content: center;
align-items: center;
span
letter-spacing: 10px;
font-size: 8rem;
.dot
position: absolute;
background: var(--blue);
width: 22px;
height: 22px;
border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;
animation: 6s dot-move ease infinite;
@keyframes dot-move
0%,
100%
transform: translate(370px);
50%
transform: translate(-370px);
.dot:after
width: 17px;
height: 17px;
content: '';
position: absolute;
background: var(--blue);
border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;
left: 25px;
top: 3px;
animation: 6s dot-after-move ease infinite;
@keyframes dot-after-move
0%
left: 0px;
5%
left: 35px;
45%
left: 0px;
50%
left: 0px;
55%
left: -30px;
95%
left: 0px;
100%
left: 0;
svg
position: absolute;
</style>
</head>
<body>
<div class="container">
<span>LOADING</span>
<span class="dot"></span>
</div>
<svg>
<defs>
<!-- 定义滤镜 -->
<filter id="filter">
<!-- 高斯模糊 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<!-- 颜色矩阵 -->
<feColorMatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20" result="filter"/>
<!-- 图像相交 -->
<feComposite in="SourceGraphic" in2="filter" operator="atop" />
</filter>
</defs>
</svg>
</body>
</html>以上是关于CSS 3.0结合SVG实现水滴穿透加载动画的主要内容，如果未能解决你的问题，请参考以下文章