原文地址: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 创作出平滑的层叠海浪特效的更多相关文章

  1. 前端每日实战:24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教程 此视频 ...

  2. 如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 22.纯 CSS 创作出美丽的彩虹条纹文字

    原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::after创出多个WEB,给其颜色,绝对定位,再利 ...

  5. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

  6. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  7. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  8. 14.纯 CSS 创作一种侧立图书的特效

    原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...

  9. 如何用纯 CSS 创作一种侧立图书的特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...

随机推荐

  1. 关于div

    <article id="a"> <div class="a1"></div> <div class="a2 ...

  2. 计算MySQL的内存峰值公式 (转)

    -- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size   ...

  3. jQuery 常用操作

    jQuery操作: 不像dom是通过等号赋值,它是传递参数 $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked ...

  4. Thinkphp 3.1. 3 ueditor 1.4.3 添加水印

    1.引入Ueditor  <!-- 实例化编辑器 --> <script type="text/javascript"> window.UEDITOR_HO ...

  5. Python高效编程技巧

    如何在列表,字典,集合中根据条件筛选数据 1.过滤掉列表[-1,-2,-3,4,5,6]中的负数和0 方法1,for循环 data = [-1, -2, -3, 4, 5, 6] res = [] f ...

  6. JavaWeb工程 目录结构***

    以下是mavaen推荐的项目目录. ├── pom.xml └── src     ├── main     │   ├── java     │   │   └── group     │   │  ...

  7. 函数节流和防抖(todo)

    一.什么是函数节流和函数防抖 函数节流和函数防抖目的都是避免同时多次执行函数. 函数防抖是将多次执行变成一次执行,函数节流是将多次执行变成每隔一定时间执行一次. 二.具体实现 三.什么时候需要节流,什 ...

  8. 峰Redis学习(8)Redis 持久化AOF方式

    第三节:Redis 的持久化之AOF 方式 AOF方式:将以日志,记录每一个操作   优势:安全性相对RDB方式高很多: 劣势:效率相对RDB方式低很多: 1)AOF方式需要配置: # Please ...

  9. mybatis 报错Result Maps collection does not contain value for java.lang.Integer

    重点:报错的方法和xml文件不一定是错误的位置,如果有多个xml文件,必须检查所有的文件 搜索  resultMap="java.lang.Integer" 找到对应的文件,改为  ...

  10. C# 连接数据库实现增删改查

    class Program { private static string urls = "server=127.0.0.1;port=3306;user=root;password=123 ...