css3 线条出现动画效果,CSS3实现的线条波浪动画效果

HTML结构

该css3线条波浪动画效果的HTML结构如下：

CSS样式

然后通过下面的CSS代码来制作线条波浪动画效果。

@keyframes move_wave {

0% {

transform: translateX(0) translateZ(0) scaleY(1)

}

50% {

transform: translateX(-25%) translateZ(0) scaleY(0.55)

}

100% {

transform: translateX(-50%) translateZ(0) scaleY(1)

}

.waveWrapper {

overflow: hidden;

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

}

.waveWrapperInner {

position: absolute;

width: 100%;

overflow: hidden;

height: 100%;

bottom: -1px;

background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);

}

.bgTop {

z-index: 15;

opacity: 0.5;

}

.bgMiddle {

z-index: 10;

opacity: 0.75;

}

.bgBottom {

z-index: 5;

}

.wave {

position: absolute;

left: 0;

width: 200%;

height: 100%;

background-repeat: repeat no-repeat;

background-position: 0 bottom;

transform-origin: center bottom;

}

.waveTop {

background-size: 50% 100px;

}

.waveAnimation .waveTop {

animation: move-wave 3s;

-webkit-animation: move-wave 3s;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.waveMiddle {

background-size: 50% 120px;

}

.waveAnimation .waveMiddle {

animation: move_wave 10s linear infinite;

}

.waveBottom {

background-size: 50% 100px;

}

.waveAnimation .waveBottom {

animation: move_wave 15s linear infinite;

}

css3 线条出现动画效果,CSS3实现的线条波浪动画效果相关推荐

Android动画定时lnvaliate,猎豹清理大师波浪动画实现
感谢段大师的指导! 波浪效果源码: 自定义控件:实现 package com.apidemos2.animation.bezierview; import android.content.Contex ...
css彩色波浪动画,纯css实现波浪动画【转】
前言:之前在博客上看到一位大神用css实现的水波动画,真是受益匪浅,原来本以为要会svg.canvas等技术,原来根本不需要,只需css简短的十几行代码就可以达到效果.关键是大神的这种思路,非常值得我 ...
纯css实现波浪动画，超级简单
前言:之前在博客上看到一位大神用css实现的水波动画,真是受益匪浅,原来本以为要会svg.canvas等技术,原来根本不需要,只需css简短的十几行代码就可以达到效果.关键是大神的这种思路,非常之得我 ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
css3波浪纹路_css3线条波浪动画效果
这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果. 使用方法 HTM ...
CSS3实现的线条波浪动画效果
阅读目录阐述 HTML结构 CSS 样式预览阐述这是一款使用CSS3 animation 动画和 png 图片制作的 css3 线条波浪动画效果. 该特效中,使用了 3 张波浪线条的 png ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
css3加载中动画效果,CSS3实现加载中的动画效果
Loading 的菊花图形组合的不太好,基本上实现这个功能了动画解析这个动画用到的 CSS3 特性: transform 主要使用 transform 属性的 rotate,将线条组合成 Load ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...

css3 线条出现动画效果,CSS3实现的线条波浪动画效果

css3 线条出现动画效果,CSS3实现的线条波浪动画效果相关推荐

最新文章

热门文章