CSS怎样实现融化成水滴滴落的效果？

发布时间：2023-09-19 11:08:00 所属栏目：语言来源：

导读：我们知道使用CSS可以实现很多有意思的特效效果，因此这篇文章给大家分享的是使用CSS实现融化成水滴滴落的效果，实现效果如下，那么这个效果是怎样做的呢？接下来跟随小编一起学习一下吧。

实现思路

融化效果是

我们知道使用CSS可以实现很多有意思的特效效果，因此这篇文章给大家分享的是使用CSS实现融化成水滴滴落的效果，实现效果如下，那么这个效果是怎样做的呢？接下来跟随小编一起学习一下吧。

实现思路

融化效果是利用 filfilter 的 contrast 和 blur 实现的。

在父元素中设置 contrast 并在子元素中设置 blur 即可实现两者相融的效果。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水滴效果</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="hpc">下雨收衫</div>
</body>
</html>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
filter: contrast(20);
}

.both{
left: 0;
content: "";
width: 10px;
height: 20px;
bottom: -20px;
border-radius: 50%;
position: absolute;
background-color: #fff;
}
.hpc{
top: 80px;
left: 100px;
color: #fff;
width: 400px;
height: 107px;
font-size: 6rem;
filter: blur(3px);
font-style: italic;
position: relative;
transform: skewY(5deg);
font-family: "Comic Sans MS";
border-bottom: 10px solid #fff;

&::before{
@extend .both;
animation: move 6s ease-in-out infinite;
}

&::after{
@extend .both;
animation: move 6s 1s ease-in-out infinite;
}

@keyframes move{
70%{
bottom: -20px;
transform: translate(380px, 5px);
}
80%{
transform: translate(380px, 3px);
opacity: 1;
}
100%{
transform: translate(380px, 180px);
opacity: 0;
}
}
}
将 SCSS 转化为 CSS 再导入即可。

关于使用CSS实现融化成水滴滴落的效果就介绍到这，本文代码具有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!