文章目录

前言
设计思路
图例
完整代码
细节&问题
- 1. 双伪元素
- 2.CSS并集选择器
- 2.position

前言

最近在学习前端知识，在做背景的时候想弄一个椭圆的弧形，想到以前网上看到的水波效果，开始制作一个水波动画，在制作的过程中也遇到一些问题，最终也找到了答案，也算是查漏补缺了。

设计思路

一个有颜色的圆形作为背景（海水的颜色），一个有透明度的白色的圆润的正方形作为挡板1，一个白色的的圆润的正方形作为挡板2。
挡板的作用是“推动海水形成波浪”，波浪的弧度跟挡板的边角比有关x，下面挡板的图片，正方形里面圆形的才是挡板，圆形外面蓝色的是因为挡板有透明度，为了直观感受背景和挡板的颜色而色设置成蓝色的。

圆形背景（海水）	白色透明挡板1（浅色圆形），透明度为0.4	白色透明挡板2（浅色圆形），透明度为0.9

由于挡板有透明度，所以挡板1是浅蓝色，挡板2不是纯白色的，是由于透明度低而显得白，其实挡板2是浅浅浅非常浅的浅蓝色。
挡板的半径是要比背景的半径要大的，这里的比例我设置成了2:1。
CSS在设置border-radius时当边角比小于50%时，边的中间是直线而不是弧，边长不变的情况下边角比越小直线越明显，边角比不变的情况下边越长直线越明显。

边长200px的正方形，边角比为45%	边长200px的正方形，边角比为35%

边长400px的正方形，边角比为45%	边长400px的正方形，边角比为35%

图例

把上述形状组合成一起后：

别看他小小的，其实不是这样的，当我给挡板加上边框后：

当我给挡板加上动画，两个挡板滚动起来，就出现了波浪动画：

动画	有框的动画

完整代码

代码参考自：纯css实现波浪动画，超级简单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pure CSS Wave</title><style>.container {position: relative;margin: 20% auto;padding: 0;border: 0;width: 200px;height: 200px;background-color: rgb(118, 218, 255); border-radius: 50%;}.wave0,.wave1{position: absolute;width: 400px;height: 400px;margin-top: -150%;margin-left: -50%;background-color: rgba(255, 255, 255, .4);border-radius: 45%;animation: spin 15s linear -0s infinite;z-index: 10;
/*            border: 1px solid;*/}.wave1{margin-top: -152%;background-color: rgba(255, 255, 255, .9);border-radius: 47%;animation: spin 30s linear -15s infinite;z-index: 20;}@keyframes spin{0%{transform: translate(-0%, -0%) rotate(0deg) scale(1);}25%{transform: translate(-1%, -1%) rotate(90deg) scale(1.0);}50%{transform: translate(-0%, -2%) rotate(180deg) scale(1.0);}75%{transform: translate(1%, -1%) rotate(270deg) scale(1.0);}100%{transform: translate(-0%, -0%) rotate(360deg) scale(1.0);}}</style>
</head>
<body><div class="container"><div class="wave0"></div><div class="wave1"></div></div>
</body>
</html>

细节&问题

1. 双伪元素

利用双伪元素变成两个挡板，这时就不需要像上面代码那样在<div class="container">里放置两个<div>了，只需要一个div标签<div class="container"></div>，CSS代码如下：

.container::before,.container::after{content: "";/*content 属性与::before及::after配合使用*/position: absolute;...
}

content和position这两个属性是缺一不可的，content: "";即没有内容的伪元素，把它类比成<div></div>。
这时的伪元素还不显示，把他们设置成position: absolute;后就出现了，由于::before和::after默认为行内元素，行内元素无法设置宽度高度，宽度只与内容有关，而前面content: "";导致伪元素没有内容，position: absolute;就把它们强制变成块级元素，相当于display:block;，这时就可以对伪元素设置宽高了。
至于双伪元素为啥可以重合，是position: absolute;的关系，两个div时也是一样，而一个div后面（或者前面）跟着一个伪元素after或before时，div和伪元素之间是有间隔的，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.wave1{position: absolute;width: 200px;height: 200px;border: 1px solid;}.wave1::after{content: "";position: absolute;width: 200px;height: 200px;
/*left: -1px;top: -1px;
*/border: 1px solid;}</style>
</head>
<body><div class="wave1"></div>
</body>
</html>

如图所示，div和伪元素是不完全重合的，边框过粗：

利用top和left对伪元素位置进行调整left: -1px; top: -1px;之后就显示正常了，如图：

另外，双伪元素还可以用来清除浮动；

2.CSS并集选择器

在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，便可以利用并集选择器同时声明这些风格相同的CSS选择器。
上面的.wave0,.wave1{...}、.container::before,.container::after{...}用的正是并集选择器的风格，声明并初始化wave0、wave1、container::before、container::after

2.position

关于position:relative和position:absolute，可以看菜鸟教程 CSS position 相对定位和绝对定位

CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画相关推荐

手把手教你solidworks重力下落物体动画制作
手把手教你solidworks重力下落物体动画制作 1.首先建立装配体,导入圆柱和圆弧面. 2.对它们进行装配,配合方式为相切,配合的面为圆柱的圆弧面和绿色零件的弧面.然后再用宽度配合,宽度选择为圆柱 ...
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
手把手教你：CSS+JS 打造一个有个性的滚动条
前言每次浏览网页的时候,有个东西必不可少,那就是滚动条.这时候有的同学可能会说了:这句话不对,有的网页看不到滚动条.其实吧,那并不是看不到滚动条,而是滚动条被隐藏起来了.我们反过来想想,如果没有滚动 ...
手把手教你如何设置H5页面动画效果
"H5",这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野.本文聚焦于基于微信传播的H5页面的动画设计,希望与大家进行交流探讨. 首先我们选择H5页面 ...
PS新手教程！手把手教你打造好玩的放大镜动画效果
今天的教程是来自@P大点S微博的Projava,利用时间轴制作一个简单的GIF动画,类似锤子科技的放大镜效果,来看看高手怎么玩. 鉴于网络要求,放大镜移动的速度有点快,为了体积小一点,所以加快速度. ...
手把手教你用CSS实现一个VR 3D游戏菜单栏效果
3D游戏菜单组件关于如何建立一个响应性.适应性和无障碍的3D游戏菜单的基础性概述. 在这篇文章中,我想带着大家写一个3D游戏菜单组件的案例.首先让我们看看成品是什么样子的概述相信大家都玩过赛博朋 ...
倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器
倒计时功能,在很多地方都会用到,我们平时都习惯去用一些插件来应用,会减少不少的工作量,并且效果也能达到预期. 我今天并不是想分享什么倒计时插件,而是自己写一个简单的倒数计时器,有兴趣的同学可以往下看看 ...
手把手教你用css画网格
最近一个项目需要网格背景.UI把网格当做图帮我切好了,我一看,这明明可以直接用css直接画嘛,能直接减少体积.对于有技术追求的前端,我就研究了一下怎样画这个高逼格的网格背景: 先看最终效果图(图片有点 ...
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...

CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画

文章目录

前言

设计思路

图例

完整代码

细节&问题

1. 双伪元素

2.CSS并集选择器

2.position

CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画相关推荐

最新文章

热门文章

CSS 波浪效果动画 波浪起伏 水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画

文章目录

前言

设计思路

图例

完整代码

细节&问题

1. 双伪元素

2.CSS并集选择器

2.position

CSS 波浪效果动画 波浪起伏 水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画相关推荐

最新文章

热门文章

CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画

CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画相关推荐