纯 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 实现蜡烛融化(水滴)效果相关推荐
- java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 git ...
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
最新文章
- HDOJ2020 ( 绝对值排序 ) 【水题】
- Linux守护进程简介
- 无限循环的ViewPager
- C++ Primer 5th笔记(chap 18 大型程序工具)内联命名空间 (inline namespace)
- Source Insight 创建工程(linux-2.6.22.6内核源码)
- PHP parseurl 一个好用的函数
- java zk监听异步_zk事件的监听和处理2
- Mybatis入门教程
- Cadence Allegro交换元件位置图文教程及视频演示
- matlab在有限差分法中的应用,MATLAB在有限差分法中的应用
- 深度学习优化策略---权重、权重初始化与权重衰减
- 2015深圳实习感悟
- R语言使用cor函数计算dataframe中多个数值数据列之间的相关性系数、计算spearman非参数的等级相关性系数
- mysql 插入缓冲_innodb insert buffer 插入缓冲区的理解
- opencv(二)图像像素提取及操作
- JDBC问题: Unknown error 1146 Query
- 山药搭配什么吃最有营养?
- 计算机网络谢希仁课后习题
- 我们是科幻迷(刘慈欣)
- 解决c++读入文件时多读一个字符
热门文章
- 无线攻击实战(AirCrack、Fern WiFi Cracker)
- 五角大楼计划扩展其有争议的Maven AI项目
- Visual Studio 2022 C++连接MySql数据库(win7和win10亲测有效)
- HTML5应用性能调优工具WAPA – 介绍篇
- 塑胶件成型时间、成型机台、产品加工费用,参考案例
- AirPods Pro“主动降噪”功能无法正常工作解决方法
- 2020-08-05智慧用电管理系统精细化运维管理——省钱
- SQL Server主键约束
- memcache分布式实现、memcache分布式的数据同步、memcache保存session数据的实现
- 制作kali linux u盘,用 Kali Linux 创建U盘随身系统