效果库
各位朋友,大家上午好!
今天给大家带来的是 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;
}
}