网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款使用css3和SVG实现的响应式波浪动画特效。
波浪css样式代码,如下所示:
* {
box-sizing: border-box;
}
:root {
--wave: #fff;
--bg: #364c63;
}
body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
main {
background: var(--bg);
-webkit-box-flex: 1;
flex: 1;
width: 100vw;
position: relative;
overflow: hidden;
}
.wave {
position: absolute;
bottom: -5%;
left: 0;
right: 0;
}
.wave:nth-of-type(1) {
--speed: 60;
--opacity: 0.3;
--height: 12;
--width: 320;
--lightness: 90;
--rise: 2;
}
.wave:nth-of-type(2) {
--speed: 30;
--opacity: 0.6;
--height: 10;
--width: 200;
--lightness: 95;
--rise: 5;
}
.wave:nth-of-type(3) {
--speed: 18;
--opacity: 1;
--height: 6;
--width: 180;
--lightness: 100;
--rise: 0;
}
footer {
background: var(--wave);
-webkit-box-flex: 1;
flex: 1;
}
.wave {
height: calc(var(--height, 0) * 1vh);
width: calc(var(--width, 0) * 1vw);
-webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
}
@media (max-width: 480px) {
.wave {
height: calc(var(--height, 0) * 0.75vh);
}
}
.wave path {
fill: hsl(0, 0%, calc(var(--lightness, 0) * 1%));
-webkit-animation: wave calc(var(--speed, 0) * 1s) infinite linear;
animation: wave calc(var(--speed, 0) * 1s) infinite linear;
}
@-webkit-keyframes wave {
to {
-webkit-transform: translate(-761px, 0);
transform: translate(-761px, 0);
}
}
@keyframes wave {
to {
-webkit-transform: translate(-761px, 0);
transform: translate(-761px, 0);
}
}
@-webkit-keyframes rise {
50% {
-webkit-transform: translate(0, calc(var(--rise) * -1%));
transform: translate(0, calc(var(--rise) * -1%));
}
}
@keyframes rise {
50% {
-webkit-transform: translate(0, calc(var(--rise) * -1%));
transform: translate(0, calc(var(--rise) * -1%));
}
}
转载请注明来源:css3响应式SVG波浪动画特效
本文永久链接地址:https://www.moyouyouw.cn/code/892.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论