论坛网站建设视频教程,网站建设 名词解释,企业网站建设解决方案,wordpress控制台一直以来#xff0c;使用纯 CSS 实现波浪效果都是十分困难的。
因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式#xff0c;实现贝塞尔曲线#xff0c;额#xff0c;暂时是没有很好的方法。 当然#xff0c;借助其他力量#xff08;SVG、CANVAS#xff09…一直以来使用纯 CSS 实现波浪效果都是十分困难的。
因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式实现贝塞尔曲线额暂时是没有很好的方法。 当然借助其他力量SVG、CANVAS是可以很轻松的完成所谓的波浪效果的先看看非 CSS 方式实现的波浪效果。 使用 SVG 实现波浪效果
借助 SVG 是很容易画出三次贝塞尔曲线的。
看看效果 代码如下 svg width200px height200px version1.1 xmlnshttp://www.w3.org/2000/svg
text classliquidFillGaugeText text-anchormiddle font-size42px transformtranslate(100,120) stylefill: #00050.0%/text
!-- Wave --
g idwave
path idwave-2 fillrgba(154, 205, 50, .8) dM 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z
animate dur5s repeatCountindefinite attributeNamed attributeTypeXML valuesM0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z/animate
/path
/g
circle cx100 cy100 r80 stroke-width10 strokewhite filltransparent/circle
circle cx100 cy100 r90 stroke-width20 strokeyellowgreen fillnone classpercentage-pie-svg/circle
/svg titleSVG WAVE srchttps://codepen.io/Chokcoco/embed/MoRGYj/?height265theme-id0default-tabhtml,resultembed-version2 frameborderno scrollingno width320 height265
画出三次贝塞尔曲线的核心在于
path idwave-2 fillrgba(154, 205, 50, .8) dM 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z 这一段。感兴趣的可以自行去研究研究。使用 canvas 实现波浪效果
使用 canvas 实现波浪效果的原理与 SVG 一样都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。 使用 canvas 的话代码如下 $(function() {
let canvas $(canvas);
let ctx canvas[0].getContext(2d);
let radians (Math.PI / 180) * 180;
let startTime Date.now();
let time 2000;
let clockwise 1;
let cp1x, cp1y, cp2x, cp2y;
// 初始状态
// ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
// 末尾状态
// ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
requestAnimationFrame(function waveDraw() {
let t Math.min(1.0, (Date.now() - startTime) / time);
if(clockwise) {
cp1x 90 (55 * t);
cp1y 28 (72 * t);
cp2x 92 - (51 * t);
cp2y 179 - (79 * t);
} else {
cp1x 145 - (55 * t);
cp1y 100 - (72 * t);
cp2x 41 (51 * t);
cp2y 100 (79 * t);
}
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.moveTo(0, 100);
// 绘制三次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
// 绘制圆弧
ctx.arc(100, 100, 100, 0, radians, 0);
ctx.fillStyle rgba(154, 205, 50, .8);
ctx.fill();
ctx.save();
if( t 1 ) {
startTime Date.now();
clockwise !clockwise;
}
requestAnimationFrame(waveDraw);
});
}) titleCanvas Wave srchttps://codepen.io/Chokcoco/embed/OgGEBx/?height265theme-id0default-tabjs,resultembed-version2 frameborderno scrollingno width320 height265
主要是利用了动态绘制
ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果感兴趣的可以自行研究。纯 CSS 实现波浪效果
好接下来才是本文的重点使用纯 CSS 的方式实现波浪的效果。
你 TM 在逗我刚刚不是还说使用 CSS 无能为力吗
是我们没有办法直接绘制出三次贝塞尔曲线但是我们可以利用一些讨巧的方法模拟达到波浪运动时的效果姑且把下面这种方法看作一种奇技淫巧。
原理
原理十分简单我们都知道一个正方形给它添加
border-radius: 50%将会得到一个圆形。border-radius用来设置边框圆角当使用一个半径时确定一个圆形。 好的如果
border-radius 没到 50%但是接近 50% 我们会得到一个这样的图形注意边角整个图形给人的感觉是有点圆却不是很圆。额这不是废话吗
好的那整这么个图形又有什么用还能变出波浪来不成
没错就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) 看看效果 可能很多人看到这里还没懂旋转起来的意图仔细盯着一边看是会有类似波浪的起伏效果的。
而我们的目的就是要借助这个动态变换的起伏动画模拟制造出类似波浪的效果。
实现
当然这里看到是全景实现图所以感觉并不明显OK让我们用一个个例子看看具体实现起来能达到什么样的效果。
我们利用上面原理可以做到的一种波浪运动背景效果图 后面漂浮的波浪效果其实就是利用了上面的
border-radius: 45% 的椭圆形只是放大了很多倍视野之外的图形都
overflow: hidden 只留下了一条边的视野并且增加了一些相应的
transform 变换。注意这里背景是蓝色静止的运动是白色的椭圆形。 代码也很简单SCSS 代码如下 body {
position: relative;
align-items: center;
min-height: 100vh;
background-color: rgb(118, 218, 255);
overflow: hidden;
:before, :after {
content: ;
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
:before {
bottom: 15vh;
border-radius: 45%;
animation-duration: 10s;
}
:after {
bottom: 12vh;
opacity: .5;
border-radius: 47%;
animation-duration: 10s;
}
}
keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
} 为了方便写 DEMO用到的长度单位是 VW 与 VH不太了解这两个单位的可以戳这里vh、vw、vmin、vmax 知多少 titlePure Css Wave srchttps://codepen.io/Chokcoco/embed/awxYWZ/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
可能有部分同学还存在疑问OK那我们把上面的效果缩小 10 倍将视野之外的动画也补齐那么其实生成波浪的原理是这样的 图中的虚线框就是我们实际的视野范围。 值得探讨的点
值得注意的是要看到这里我们生成波浪并不是利用旋转的椭圆本身而是利用它去切割背景产生波浪的效果。那为什么不直接使用旋转的椭圆本身模拟波浪效果呢因为
中间高两边低的效果不符合物理学原理看上去十分别扭
可以点进去看看下面这个例子
CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图
好既然掌握了这种方法下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。
HTML 结构如下 div classcontainer
div classwave/div
/div CSS 代码如下 .wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
::before,
::after{
content: ;
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
} 效果图 CodePen Demo -- Pure Css Wave Loading titlePure Css Wave Loading srchttps://codepen.io/Chokcoco/embed/EXJrdB/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
虽然效果差了一点点但是相较于要使用学习成本更高的 SVG 或者 CANVAS这种纯 CSS 方法无疑可使用的场景更多学习成本更低 一些小技巧
单纯的让一个
border-radius 接近 50 的椭圆形旋转动画效果可能不是那么好我们可以适当的添加一些其他变换因素让动画效果看上去更真实在动画过程中动态的改变 border-radius 的值在动画过程中利用 transform 对旋转椭圆进行轻微的位移、变形上面也演示到了多个椭圆同时转动赋予不同时长的动画并且添加轻微的透明度让整个效果更佳逼真。 最后
系列 CSS 文章汇总在我的 Github 持续更新欢迎点个 star 订阅收藏。
好了本文到此结束希望对你有帮助 :)
如果还有什么疑问或者建议可以多多交流原创文章文笔有限才疏学浅文中若有不正之处万望告知。
