html图片特效波动,HTML5特效库 canvas 布料皱纹波动特效源码

效果库

各位朋友，大家上午好！

今天给大家带来的是 canvas 布料皱纹波动特效源码！

大家可以按照自己的意愿 修改成喜欢的样子！比如做出海水波浪啦！

若是有想文件版源码的可以进HTML5前端技术交流

522323792

好了，废话不多说，上源码！

body {

background: #F2D9BB;

}

ul.page {

position: absolute;

width: 260px;

height: 375px;

top: 50%;

left: 50%;

box-shadow: 0 3px 20px #88571B;

border-radius: 7px;

overflow: hidden;

transform: translate(-50%, -50%);

}

ul.page li.line {

position: relative;

float: left;

width: 100%;

height: 25px;

overflow: hidden;

}

ul.page li.line span.wave {

position: absolute;

display: block;

width: 18px;

height: 18px;

bottom: 0;

left: -20px;

border-radius: 50%;

}

ul.page li.line span.wave:before, ul.page li.line span.wave:after

{

content: "";

position: absolute;

}

ul.page li.line span.wave:before {

width: 38px;

height: 20px;

top: 0px;

left: -32px;

transform-origin: 100% 0%;

transform: rotate(-30deg);

}

ul.page li.line span.wave:after {

width: 10px;

height: 30px;

top: 7px;

right: -4px;

transform: rotate(-15deg);

}

ul.page li.line:nth-child(odd) {

background: #F2D9BB;

}

ul.page li.line:nth-child(odd) span, ul.page li.line:nth-child(odd)

span:before, ul.page li.line:nth-child(odd) span:after {

background: #a70747;

}

ul.page li.line:nth-child(even) {

background: #a70747;

}

ul.page li.line:nth-child(even) span, ul.page

li.line:nth-child(even) span:before, ul.page

li.line:nth-child(even) span:after {

background: #F2D9BB;

}

ul.page li.line:last-child span, ul.page li.line:last-child

span:before, ul.page li.line:last-child span:after {

display: none;

}

li.line:nth-child(1) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.1s;

}

li.line:nth-child(2) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.2s;

}

li.line:nth-child(3) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.3s;

}

li.line:nth-child(4) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.4s;

}

li.line:nth-child(5) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.5s;

}

li.line:nth-child(6) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.6s;

}

li.line:nth-child(7) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.7s;

}

li.line:nth-child(8) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.8s;

}

li.line:nth-child(9) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 0.9s;

}

li.line:nth-child(10) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1s;

}

li.line:nth-child(11) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1.1s;

}

li.line:nth-child(12) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1.2s;

}

li.line:nth-child(13) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1.3s;

}

li.line:nth-child(14) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1.4s;

}

li.line:nth-child(15) span {

animation: move 2.4s ease-in-out infinite;

animation-delay: 1.5s;

}

@keyframes move {

from {

left: -20px;

}

to {

left: 280px;

}

}