html实现波浪,纯CSS实现波浪移动效果的示例
在某些页面上常常看到波浪的效果,虽然只有装饰的作用,但是却让页面看上去更生动了,同时某些情况下也能起到进度条的作用,而波浪的形式却比普通进度条更美观有趣。
如果想要实现波浪的效果,作者想到的第一个方法是通过 canvas 绘制波浪,然后用帧动画让波浪运动起来。这种方式实现的波浪效果应该是最好的,能够实现很多细节,比如控制波峰的高度、改变波浪的数量、根据前一个波浪的高度计算后一个波浪的高度等等。
但是往往需求并不会这么复杂,产品经理和设计想要的只是一个看上去还比较美观的波浪效果而已。如果用 canvas 去做,就实在是大材小用了,耗时耗力。所以这种情况下,就可以尝试使用 css 来完成这个小需求。
分析波浪效果
上面是作者完成的波浪效果的其中一种(不会做 gif,就用多张图片拼贴在一起代替吧),它有两个波峰,这两个波峰动起来时,会有一种向右推进的效果。我们先一个一个来看,如果要实现一个波峰,我们应该怎么做?
波峰具有弧度,在 css 中能够实现弧度效果的是border-raduis这个属性;而对于向右推进的效果,单个来看的话,其实可以理解为是旋转动画,我们可以通过animation来实现。
// html
// style
.wave {
width: 300px;
height: 300px;
border-raduis: 50%;
background: blue;
}
上面代码中的.wave在页面上的显示效果是一个圆形。虽然还没有添加动画,但是我们已经可以预想到,即使旋转起来,我们视觉上看来并没有在运动。这要怎么解决呢?其实很简单,只要让每一个角的弧度都不同就行了。同时,让宽高不同,可以使绘制出来的效果更好。
.wave {
width: 250px;
height: 300px;
border-top-right-radius: 150px;
border-top-left-radius: 150px;
border-bottom-right-radius: 150px;
border-bottom-left-radius: 140px;
background: #adcbfe;
}
然后通过动画使这个不规则的形状动起来。
.wave {
width: 250px;
height: 300px;
border-top-right-radius: 150px;
border-top-left-radius: 150px;
border-bottom-right-radius: 150px;
border-bottom-left-radius: 140px;
background: #adcbfe;
animation: wave 4s linear infinite;
}
@keyframes wave {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
关于 css 动画的使用,可以参考之前的一篇文章:
到这里,一个波浪的实现就完成了。第二个波浪的实现步骤和第一个是相同的,但是可以对width height border-raduis animation 这些属性进行修改,使两个波浪的运动节奏不同,有快有慢有高有低,这样波浪的效果就会更真实。
想要看源码的小伙伴可以戳下面这个链接:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html实现波浪,纯CSS实现波浪移动效果的示例相关推荐
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- css3波浪纹路_纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
- html导航凹凸效果,纯CSS实现底部弧度效果(凹凸圆弧)
相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧),其它三边都正常的情况,这种图之前我都会采用图片去搞,但是身为一名开发人员(算是程序员了),应该从便曾的角度去解决问题,所以今天分享下纯css实现底部弧 ...
最新文章
- Python学习笔记:Day 12 编写日志列表页
- 编程之美 1.12 nim(2)
- linux otl oracle,linux otl 连接数据库
- linux 发送http请求方式
- 产品经理必知必会的SQL
- 程序员谈谈我的职场观(三)
- eslint是什么_为什么eslint没有 no-magic-string?
- python面板数据模型_面板数据模型选择问题
- 紧急重要四象限软件用哪款便签软件?
- 使用PHP实现文件上传
- 计算机视觉笔记及资料整理(含图像分割、目标检测小方向学习)
- 二叉树的镜像和对称二叉树
- html5是什么语言,html5 css3是什么?
- EPICS记录参考--模拟输出记录(ao)
- Python爬虫之获取淘宝商品数据
- Chart.js与ECharts.js图表组件对比与使用
- C++ 高精度除法运算(c=a/b)
- 洞悉物联网发展1000问之软银孙正义的最新三大投资秘诀是什么?
- HTML转换成PDF 指定网页转换PDF(实际上是截取网页) pdf.js , dompdf , html2ps , wkhtmltopdf
- 计算机软件设计硕士生导师,孙明副教授、硕士生导师-山东大学软件与数据工程研究中心...
热门文章
- ActivityNet 2018介绍
- mysql在手游中的作用_数据库虚拟化技术_手游业务MySQL数据库虚拟化漫谈 | By 肖力-云栖社区...
- 使用wireshark解密PC浏览器的HTTPS流量
- python not found in axis_关于python:pandas-drop函数错误 (label not contained in axis)
- 机器学习实战(三)朴素贝叶斯 (Peter Harrington著)
- 30岁的我,裸辞、自甘堕落、重回生活:成功转行Python工程师,月入1W+
- pcie台式网卡无法开热点
- 网页优化(布局优化、图片优化)
- Diffusion models代码解读:入门与实战
- 【域渗透提权】CVE-2020-1472 NetLogon 权限提升漏洞