24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634
感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。
HTML代码:
<div class="sea">
<p class="title">the sea</p>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
CSS代码:
html, body {
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(antiquewhite, navajowhite);
}
.sea {
position: relative;
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);
overflow: hidden;
}
/* 这里只有水平居中和行高一定 */
.sea .title {
position: absolute;
width: 100%;
color: white;
font-size: 24px;
font-family: serif;
text-align: center;
line-height: 250px;
text-transform: uppercase;
letter-spacing: 0.4em;
z-index:;
}
/* 制作海浪动画效果: 让三个平面按不同时间旋转 */
.sea .wave {
position: absolute;
top: -250px;
left: -100px;
width: 500px;
height: 500px;
background: deepskyblue;
border-radius: 43%;
filter: opacity(0.4);
/* 加大海浪的波动幅度:设置旋转元素的基点位置 */
transform-origin: 50% 48%;
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;
/* 增加颜色差异 */
background-color: orangered;
filter: opacity(0.1);
}
@keyframes drift {
from {
transform: rotate(360deg);
}
}
24.纯 CSS 创作出平滑的层叠海浪特效的更多相关文章
- 前端每日实战:24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 22.纯 CSS 创作出美丽的彩虹条纹文字
原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::after创出多个WEB,给其颜色,绝对定位,再利 ...
- 72.纯 CSS 创作气泡填色的按钮特效
原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
- 23.纯 CSS 创作一个菜单反色填充特效
原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...
- 14.纯 CSS 创作一种侧立图书的特效
原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...
- 如何用纯 CSS 创作一种侧立图书的特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...
随机推荐
- WPF Demo17 数据绑定
实例一:以资源的形式实现 namespace 数据绑定1 { public class Student { public int Id { get; set; } public string Name ...
- spring boot 热更新配置
maven添加 spring-boot-devtools 允许自动构建 设置里面,搜索compiler,在Build,Execution,Deployment里面勾选Build project aut ...
- Flask-状态保持-CSRF
问题:cookies基于浏览器的同源策略,不同域名的cookie不能相互访问,为什么可以进行跨站请求伪造呢? 原因:cookie基于浏览器的同源策略,确实是在实现状态保持的时候,不能跨域访问. 跨站请 ...
- ALGO-18_蓝桥杯_算法训练_单词接龙(搜索)
问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- C++进阶--代码复用 继承vs组合
//############################################################################ /* * 代码复用: 继承 vs 组合 * ...
- PyQt5显示一个空白的窗口
效果如下图: """ In this example, we create a simple window in PyQt5. """ # ...
- Jmeter(四)NO-GUI模式运行
在前几篇中有提到NO-GUI模式的运行,是的,Jmeter支持NO-GUI方式的运行. 如果Jmeter的环境搭建完毕,那么在命令行下执行jmeter - ?便会出现jmeter的各个参数 --? p ...
- [UE4]蓝图的颜色
一.蓝色:调用的函数或事件 二.绿色:纯函数 三.紫色:函数定义 四.灰色:宏 五.白色:执行线 六.事件的定义 另外还有数据类型的颜色: 执行线是白色,数据线颜色跟数据量类型一致.
- Course List for Student
题目描述 Zhejiang University has 40000 students and provides 2500 courses. Now given the student name li ...
- 【 MAKEFILE 编程基础之三】详解 MAKEFILE 变量的定义规则使用!
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/770.html ...