css水滴融合网页,纯 CSS 实现蜡烛融化(水滴)的示例代码

实现效果

e4888eb02547682a0a46e8fa35fa8fd4.gif

实现思路

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

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

代码

水滴效果
下雨收衫

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 实现蜡烛融化(水滴)的示例代码的文章就介绍到这了,更多相关 CSS 蜡烛融化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值