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 可交互视频教程 此视 ...
随机推荐
- delphi absolute 应用实例
procedure TForm1.Button1Click(Sender: TObject); var i1,i2:Integer; b:..] of Byte absolute i1; // b 在 ...
- 【转】[Android] NDK独立编译——独立工具链
转载地址:https://blog.csdn.net/suningning/article/details/74510125
- C# 生成时间戳
编写网络程序中难免用到一些时间戳. 早前不知道哪里复制过一个代码,如下: public static string GetTimeStamp() { TimeSpan ts = DateTime.Ut ...
- Ubuntu(虚拟机)下安装Qt5.5.1
1.到官网下载需要的相应版本 http://download.qt.io/archive/qt/ (这里我选择的是 qt-opensource-linux-x64-android-5.5.1.run) ...
- 我的ehcache笔记
我的EhcacheUtils类: package com.shinho.bi.utils; import org.ehcache.CacheManager; import org.ehcache.co ...
- bzoj5052: 繁忙的财政官
求区间内相差最小的两个数的差 分sqrt(n)块,预处理两个数在块内,以及一个数在块内一个数在零散部分的情况,询问时归并排序处理两个数都在零散部分的情况,时间复杂度$O((n+q)\sqrt{n})$ ...
- 学习笔记之Supervised Learning with scikit-learn | DataCamp
Supervised Learning with scikit-learn | DataCamp https://www.datacamp.com/courses/supervised-learnin ...
- Jmeter(二十八)Jmeter-Question之“HTTPS请求”
前面在Jmeter-Question中有提到若干问题,有时间呢,我也会进行继续编写随笔,梳理自己的知识,本篇呢,便来记Jmeter发送https请求的过程 内容大致与http://blog.csdn. ...
- vi/vim 光标移动命令(转载)
转载至:https://www.cnblogs.com/Jacklovely/p/6015037.html vi/vim 光标移动命令 移动光标上:k nk:向上移动n行 9999k或gg可以移到第一 ...
- Delphi TstringList Stringlist的特殊用法
procedure TForm1.btn1Click(Sender : TObject); var m : Integer; s : string; strlst ...