css3 实现波浪(wave)效果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
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);
position: relative;
overflow: hidden;
} .sea .title {
color: white;
font-size: 24px;
font-family: serif;
text-align: center;
line-height: 252px;
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;
transform-origin: 50% 48%;
} .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);
}
}
</style>
</head> <body>
<div class="sea">
<p class="title">the sea</p>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</body> </html>
css3 实现波浪(wave)效果的更多相关文章
- Css3实现波浪线效果1
一.波浪线 ,常用 .info::before { content: ''; position: absolute; top: 30px; width: 100%; height: 0.25em; b ...
- Css3实现波浪效果2
一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 使用 SVG 来实现波浪 (wave) 动画效果
如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
随机推荐
- Codeforces Round #433 Div. 1
A:显然从大到小排序后贪心放在第一个能放的位置即可.并查集维护. #include<iostream> #include<cstdio> #include<cmath&g ...
- SPOJ705-New Distinct Substrings-后缀数组
计算所都不相同子串的个数,做法是所有子串的个数减去sigma(height[]).其中height数组的和便是所有相同子串的个数. 注意 N×(N+1)/2会爆int!但是最终答案在int内.所以使用 ...
- 数字平滑 前端插件JS&CSS库
CDN DEMO 拷贝可用: <!DOCTYPE html> <link rel="stylesheet" href="https://cdn.boot ...
- Android工程图片资源命名禁忌
Android工程中,res\drawable\ 文件夹下所有的图片资源文件命名,不允许: 1. 大写字母 从Eclipse的这个报错可以知道资源文件的命名规则. Invalid file name: ...
- Spring点滴五:Spring中的后置处理器BeanPostProcessor讲解
BeanPostProcessor接口作用: 如果我们想在Spring容器中完成bean实例化.配置以及其他初始化方法前后要添加一些自己逻辑处理.我们需要定义一个或多个BeanPostProcesso ...
- js-基本语法2
类型转换 1.直接转换 parseInt() 与 parseFloat() alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); //弹出19 ale ...
- Hyper-V
docker与vm同时安装,会导致虚拟机无法启动及网络不通等问题,解决方法分为两步. 1.在网络连接中禁用vEthernet连接. 2.控制面板>程序>程序和功能中 >启用或关闭wi ...
- 20165223 Linux安装及命令入门
预备作业3:Linux安装及命令入门 一.VirtualBox和Ubuntu的安装 通过学习实践基于VirtualBox虚拟机安装Ubuntu图文教程,我开始学习虚拟机的安装,根据教程一步步试着安装. ...
- 搭建简易的WebServer(基于pyhton实现简易Web框架 使用socket套接字)
1. 使用web底层socket的方式实现简易服务器的搭建,用来理解学习 # 1.导入socket模块 import socket import re import gevent import sys ...
- BZOJ 1854: [Scoi2010]游戏(二分图匹配/并查集)
题面: https://www.lydsy.com/JudgeOnline/problem.php?id=1854 题解: 1.二分图匹配: 首先我们发现每件装备只能在两种属性中选一种.因此,我们以每 ...