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 可交互视频教程 此视 ...
随机推荐
- ASP.NET Web APIs 基于令牌TOKEN验证的实现(保存到DB的Token)
http://www.cnblogs.com/niuww/p/5639637.html 保存到DB的Token 基于.Net Framework 4.0 Web API开发(4):ASP.NET We ...
- Thinkphp 缓存和静态缓存局部缓存设置
1.S方法缓存设置 if(!$rows = S('indexBlog')){ //*$rows = S('indexBlog') $rows = D('blog')->select(); S(' ...
- modbus tcp 入门详解
Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试 前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com ...
- NIO基本操作
NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题 NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector(选择器) Channel(通道) ...
- spring 整合Junit学习
测试一般是测试的局部功能,使用时需要自己写个测试相关的spring配置文件,比较费劲,所以常用的是纯配置的方式来实现测试. @RunWith(SpringJUnit4ClassRunner.class ...
- hadoop长时间运行后,stop-all.sh报错
报错现象: hadoop在stop-all.sh的时候依据的是datanode上的mapred和dfs进程号. 而默认的进程号保存在/tmp下,linux默认会每 隔一段时间(一般是一个月或者7天左右 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- MATLAB的一些小技巧
写论文要将图片保存为tiff格式,还要求dpi,还要标注,真是麻烦,下面的命令是最方便的程序化处理方式了 MATLAB text标注后 保存为 tiff 图片,图片到边框间无空白 clear all; ...
- [UE4]世界坐标、本地坐标
本地坐标 世界坐标
- centos7+apache+svn配置 踩坑,注意权限问题。apache应用目录checkout应用 必须用这个命令:svn co file:///home/svn/test/ test ,通过svn add * &&commit 及任意修改都是不行的
阅读帮助 命令提示符 [root@server-002 ~]# 表示当前服务root用户执行的命令 [svn@server-002 ~]$ 表示普通用户svn执行的命令 [root@localhost ...