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

发布时间：2022-01-12 12:57 所属栏目：13 来源：互联网

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

　　我们知道使用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;
　　    }
　　 }
　　}

（编辑：ASP站长网）