前端每日实战:24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/JvmBdE
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cp2edUD
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含一行文本和3条做海浪特效的 <span>:
<div class="sea">
<p class="title">the sea</p>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
居中显示:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(antiquewhite, navajowhite);
}
设置容器样式:
.sea {
width: 300px;
height: 300px;
background-color: whitesmoke;
background-image: linear-gradient(
darkblue,
rgba(255, 255, 255, 0) 80%,
rgba(255, 255, 255, 0.5));
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
}
设置文字样式:
.sea {
position: relative;
}
.sea .title {
color: white;
font-size: 24px;
font-family: serif;
text-align: center;
line-height: 250px;
text-transform: uppercase;
letter-spacing: 0.4em;
position: absolute;
z-index: 1;
width: 100%;
}
制作海浪动画效果:
.sea .wave {
position: absolute;
top: -250px;
left: -100px;
width: 500px;
height: 500px;
background: deepskyblue;
border-radius: 43%;
filter: opacity(0.4);
animation: drift linear infinite;
}
.sea .wave:nth-of-type(1) {
animation-duration: 5s;
}
.sea .wave:nth-of-type(2) {
animation-duration: 7s;
}
.sea .wave:nth-of-type(3) {
animation-duration: 9s;
}
@keyframes drift {
from {
transform: rotate(360deg);
}
}
加大海浪的波动幅度,增加颜色差异:
.sea .wave {
transform-origin: 50% 48%;
}
.sea .wave:nth-of-type(3) {
background-color: orangered;
filter: opacity(0.1);
}
最后,隐藏容器外的内容:
.sea {
overflow: hidden;
}
大功告成!
前端每日实战:24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效的更多相关文章
- 如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...
- 24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...
- 前端每日实战:72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 前端每日实战:14# 视频演示如何用纯 CSS 创作一种侧立图书的特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
随机推荐
- Python-位操作 ( &,|,~,^,<<,>>
用于提高运算速度,规避算术运算符 在位操作运算中,不应该试图考虑先得到一个数的二进制码 ,而是应该将这个数看作是一个二进制码,二进制补码与整数之间是一一对应的. 诚然Python中有内置函数bin将一 ...
- 网络流强化-HDU2732
第一次遇到加了“多余”的边会导致WA的——在我看来是很多余,见代码191行 之后会思考为什么,想出来再更. 问题弄明白了,如果你在连接边连了一条到没有柱子的点的边,这个没有柱子的点是不可能连到终点的, ...
- 10 (H5*) js第10天 正则表达式、深浅拷贝
目录: 1:浅拷贝 2: 深拷贝 3:遍历DOM树 4:正则表达式 5:正则表达式的创建方式 6:字符串中的正则表达式 7:真数组和伪数组 8: escape()和unescapt() 编码和 解 ...
- kmp(最长前缀与后缀)
http://acm.hdu.edu.cn/showproblem.php?pid=1358 Period Problem Description For each prefix of a given ...
- SVN合并主干分支的方法
第一步 第二步 第三步 第四步
- linux配置mysql数据库远程连接失败
今天配置linux下mysql数据库可以远程访问的问题,百度这方面的资料有很多,但是方法都一样,都试过了却未能解决,记录一下 第一步:在/etc/mysql/my.cnf下找到bind-address ...
- 消息中间件-技术专区-RocketMQ架构原理
RocketMQ是阿里开源的分布式消息中间件,跟其它中间件相比,RocketMQ的特点是纯JAVA实现:集群和HA实现相对简单:在发生宕机和其它故障时消息丢失率更低. 一.RocketMQ专业术语 P ...
- IIS 添加二级应用程序
1.在原有的站点上添加虚拟目录 2.转换成应用程序
- opencv视频流的读取和处理
Opencv提供一个简单易用的框架以提取视频文件和USB摄像头中的图像帧,如果只是想读取某个视频,你只需要创建一个VideoCapture实例,然后在循环中提取每一帧.下面是一个简单的代码 #incl ...
- 客户端GUI结构学习总结
这几个月的开发工作主要是关于游戏内GUI的,业务开发之余也时常会看看客户端工程里的GUI系统这一块的代码,这里系统的总结下. 一.GUI树形结构 在GUI中所有的控件都遵循树形结构: 在客户端初始化时 ...