会python真的可以为所欲为0(回)
400天前
这里还有人吗1(回)
585天前这里还有人吗0(回)
585天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
810天前到处都是羊，不想上班0(回)
889天前
鸽子
0(回)
894天前
CSS3制作莲花盛开动画.rar(免费下载)[4 次下载]<!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> |
CSS3制作莲花盛开动画.rar(免费下载)[4 次下载]
