首页 建站教程 WEB前端 正文

纯CSS实现的波形动画

纯CSS实现的波形动画,波浪型动画运用比较广,经常在H5或APP页面中看到,用CSS3实现比较简单。html代码:<div class="wave"></div>css代码:body { height: 100vh; background-color: royalblue; &...

纯css实现的波形动画,波浪型动画运用比较广,经常在H5或APP页面中看到,用css3实现比较简单。

纯CSS实现的波形动画 前端 水波 特效 css 波形动画 图1

html代码:

<div class="wave"></div>

css代码:

body {
    height: 100vh;
    background-color: royalblue;
    background-image: -webkit-linear-gradient( rgba(0, 200, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: linear-gradient( rgba(0, 200, 255, 0.2), rgba(255, 255, 255, 0));
    overflow: hidden;
}
.wave,
.wave::before,
.wave::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250vw;
    height: 250vw;
    margin-left: -125vw;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-image: -webkit-linear-gradient( rgba(150, 255, 255, 0.5), rgba(240, 240, 100, 0.5));
    background-image: linear-gradient( rgba(150, 255, 255, 0.5), rgba(240, 240, 100, 0.5));
    border-radius: 38% 42%;
    box-shadow: inset 0 0 10vw rgba(255, 255, 255, 0.5);
    -webkit-animation: spin 16s infinite linear;
    animation: spin 16s infinite linear;
}
.wave::before {
    width: 105%;
    height: 95%;
    margin-top: -125vw;
    -webkit-transform-origin: 49% 51%;
    transform-origin: 49% 51%;
    background-image: -webkit-linear-gradient( rgba(255, 180, 150, 0.5), rgba(180, 200, 255, 0.5));
    background-image: linear-gradient( rgba(255, 180, 150, 0.5), rgba(180, 200, 255, 0.5));
    border-radius: 40% 38%;
    -webkit-animation: spin 13s infinite linear;
    animation: spin 13s infinite linear;
}
.wave::after {
    width: 102%;
    height: 98%;
    margin-top: -125vw;
    -webkit-transform-origin: 51% 49%;
    transform-origin: 51% 49%;
    background-image: -webkit-linear-gradient( rgba(100, 240, 150, 0.5), rgba(80, 200, 255, 0.5));
    background-image: linear-gradient( rgba(100, 240, 150, 0.5), rgba(80, 200, 255, 0.5));
    border-radius: 48% 42%;
    -webkit-animation: spin 10s infinite linear;
    animation: spin 10s infinite linear;
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

查看演示效果

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:https://www.umtheme.com/web/50.html

相关推荐

css中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 206
纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 855
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持