css3波浪纹路_css3线条波浪动画效果

这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。

使用方法

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线条波浪动画效果相关推荐

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
css3波浪纹路_css3实现波纹特效、H5实现动态波浪效果
css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动 ...
css3鼠标果果变手型代码_css3 鼠标悬浮动画效果
CSS3案例 Title body{ margin:0; } div{ width:150px; height:150px; background: #ffb568; font:30px/202px ...
css3 div跳动动画_CSS3实现闪烁动画效果
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -web ...
[译]CSS3实现柱状图的3D立体动画效果
翻译自<Animated 3D Bar Chart with CSS3> 首先,我们看一看要实现的效果: 这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章, ...
css 悬停动画_CSS3缩放图像动画效果悬停
css 悬停动画 Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images b ...
CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...

css3波浪纹路_css3线条波浪动画效果

css3波浪纹路_css3线条波浪动画效果相关推荐

最新文章

热门文章