<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3制作花纹图案动画特效 - 【更多源码:www.96flw.com】</title>
<link rel="stylesheet" href="css/style.css">
<script src='js/css-doodle.min.js'></script>
</head>
<body>
<css-doodle>
:doodle {
@grid: 10x10;
@size: 50em;
grid-gap: 1px;
}
:container {
grid-gap: 1px;
}
@shape: @p( heart, clover 5, star, hypocycloid 5, clover 5);
@size: @r(5em, 1em,0.5em);
background-color: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
transform: scale(@rand(.1,1.5,.9)) translate3d(@r(150px), @r(200px), 0) rotate(@r(360deg));
animation: test infinite @r(5000ms, 10000ms) ease-in-out;
@keyframes test {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);
}
100% {
transform: translate3d(0, 0, 0);
}
</css-doodle>
</body>
</html>