[css]代码库
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3制作莲花盛开动画</title>
<link href="base.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="prefixfree.min.js"></script>
<style type="text/css" media="screen">
body {
background-color: #d4d4d4;
}
.demo {
margin: 40px auto 0;
width: 500px;
}
.box {
position: relative;
height: 400px;
}
.box .leaf {
position: absolute;
}
.leaf {
margin-top: 400px;
width: 300px;
height: 300px;
border-radius: 300px 0px;
background: -*-linear-gradient(45deg, rgba(188, 190, 192, 1) 8%, rgba(158, 31, 99, 1) 30%, rgba(158, 31, 99, 1) 100%);
opacity: 0.5;
filter:alpha(opacity=50);
transform: rotate(45deg);
transform-origin: top right;
}
.leaf:nth-child(2) {
animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 5s ease-in-out infinite;
}
@keyframes show-2 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(71deg);
}
}
@keyframes show-3 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(96deg);
}
}
@keyframes show-4 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(123deg);
}
}
@keyframes show-5 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(149deg);
}
}
@keyframes show-6 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(175deg);
}
}
@keyframes show-7 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(200deg);
}
}
@keyframes show-8 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="page">
<header id="header">
<hgrounp class="white blank">
<h1>CSS3制作莲花盛开动画</h1>
<h2> 作者：藤藤 </h2>
</hgrounp>
</header>
<section class="demo">
<div class="box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</section>
</div>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]
会python真的可以为所欲为0(回)
8小时前
这里还有人吗1(回)
185天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
410天前
鸽子
0(回)
494天前
CSS3制作莲花盛开动画.rar(免费下载)[3 次下载]
