以下是 css3荷花开放效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3荷花开放效?- 站长素材</title>
<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">
<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>
<style>
.page{
text-align:left;
padding-top:40px;
}
.wrap_top_nav{
background-color:#333;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
height:40px;
}
#top_nav{
width:1000px;
margin:0 auto;
position:relative;
}
#top_nav a{
font-size:16px;
line-height:40px;
float:left;
margin-right:20px;
color:#999;
text-decoration:none;
}
#top_nav a:hover{
color:#fff;
}
#top_nav li:nth-child(1) a{
background-position: 0 -12px;
background-repeat: no-repeat;
background-size: 68px 60px;
padding-left:74px;
color:#fff;
width:74px;
overflow:hidden;
}
#read{
position:absolute;
right:0;
top:0;
font-family:'����';
}
#header{
text-align:center;
}
#header .white{
color:#fff;
}
#header .blank{
color:#444;
}
#header h1{
font-size:24px;
}
#header h2{
font-weight:normal;
}
#ad_w3cplus {
width: 750px;
margin: 100px auto;
text-align: center;
}
#ad_w3cplus .grid-ad {
float:left;
}</style>
<script>(function () { function t(e, t) { return [].slice.call((t || document).querySelectorAll(e)) } if (!window.addEventListener) return; var e = window.StyleFix = { link: function (t) { try { if (t.rel !== "stylesheet" || t.hasAttribute("data-noprefix")) return } catch (n) { return } var r = t.href || t.getAttribute("data-href"), i = r.replace(/[^\/]+$/, ""), s = t.parentNode, o = new XMLHttpRequest, u; o.onreadystatechange = function () { o.readyState === 4 && u() }; u = function () { var n = o.responseText; if (n && t.parentNode && (!o.status || o.status < 400 || o.status > 600)) { n = e.fix(n, !0, t); if (i) { n = n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function (e, t, n) { return /^([a-z]{3,10}:|\/|#)/i.test(n) ? e : 'url("' + i + n + '")' }); var r = i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, "\\$1"); n = n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + r, "gi"), "$1") } var u = document.createElement("style"); u.textContent = n; u.media = t.media; u.disabled = t.disabled; u.setAttribute("data-href", t.getAttribute("href")); s.insertBefore(u, t); s.removeChild(t); u.media = t.media } }; try { o.open("GET", r); o.send(null) } catch (n) { if (typeof XDomainRequest != "undefined") { o = new XDomainRequest; o.onerror = o.onprogress = function () { }; o.onload = u; o.open("GET", r); o.send(null) } } t.setAttribute("data-inprogress", "") }, styleElement: function (t) { if (t.hasAttribute("data-noprefix")) return; var n = t.disabled; t.textContent = e.fix(t.textContent, !0, t); t.disabled = n }, styleAttribute: function (t) { var n = t.getAttribute("style"); n = e.fix(n, !1, t); t.setAttribute("style", n) }, process: function () { t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); t("style").forEach(StyleFix.styleElement); t("[style]").forEach(StyleFix.styleAttribute) }, register: function (t, n) { (e.fixers = e.fixers || []).splice(n === undefined ? e.fixers.length : n, 0, t) }, fix: function (t, n, r) { for (var i = 0; i < e.fixers.length; i++) t = e.fixers[i](t, n, r) || t; return t }, camelCase: function (e) { return e.replace(/-([a-z])/g, function (e, t) { return t.toUpperCase() }).replace("-", "") }, deCamelCase: function (e) { return e.replace(/[A-Z]/g, function (e) { return "-" + e.toLowerCase() }) } }; (function () { setTimeout(function () { t('link[rel="stylesheet"]').forEach(StyleFix.link) }, 10); document.addEventListener("DOMContentLoaded", StyleFix.process, !1) })() })(); (function (e) { function t(e, t, r, i, s) { e = n[e]; if (e.length) { var o = RegExp(t + "(" + e.join("|") + ")" + r, "gi"); s = s.replace(o, i) } return s } if (!window.StyleFix || !window.getComputedStyle) return; var n = window.PrefixFree = { prefixCSS: function (e, r, i) { var s = n.prefix; n.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function (e, t, n, r) { return t + (n || "") + "linear-gradient(" + (90 - r) + "deg" })); e = t("functions", "(\\s|:|,)", "\\s*\\(", "$1" + s + "$2(", e); e = t("keywords", "(\\s|:)", "(\\s|;|\\}|$)", "$1" + s + "$2$3", e); e = t("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + s + "$2:", e); if (n.properties.length) { var o = RegExp("\\b(" + n.properties.join("|") + ")(?!:)", "gi"); e = t("valueProperties", "\\b", ":(.+?);", function (e) { return e.replace(o, s + "$1") }, e) } if (r) { e = t("selectors", "", "\\b", n.prefixSelector, e); e = t("atrules", "@", "\\b", "@" + s + "$1", e) } e = e.replace(RegExp("-" + s, "g"), "-"); e = e.replace(/-\*-(?=[a-z]+)/gi, n.prefix); return e }, property: function (e) { return (n.properties.indexOf(e) ? n.prefix : "") + e }, value: function (e, r) { e = t("functions", "(^|\\s|,)", "\\s*\\(", "$1" + n.prefix + "$2(", e); e = t("keywords", "(^|\\s)", "(\\s|$)", "$1" + n.prefix + "$2$3", e); return e }, prefixSelector: function (e) { return e.replace(/^:{1,2}/, function (e) { return e + n.prefix }) }, prefixProperty: function (e, t) { var r = n.prefix + e; return t ? StyleFix.camelCase(r) : r } }; (function () { var e = {}, t = [], r = {}, i = getComputedStyle(document.documentElement, null), s = document.createElement("div").style, o = function (n) { if (n.charAt(0) === "-") { t.push(n); var r = n.split("-"), i = r[1]; e[i] = ++e[i] || 1; while (r.length > 3) { r.pop(); var s = r.join("-"); u(s) && t.indexOf(s) === -1 && t.push(s) } } }, u = function (e) { return StyleFix.camelCase(e) in s }; if (i.length > 0) for (var a = 0; a < i.length; a++) o(i[a]); else for (var f in i) o(StyleFix.deCamelCase(f)); var l = { uses: 0 }; for (var c in e) { var h = e[c]; l.uses < h && (l = { prefix: c, uses: h }) } n.prefix = "-" + l.prefix + "-"; n.Prefix = StyleFix.camelCase(n.prefix); n.properties = []; for (var a = 0; a < t.length; a++) { var f = t[a]; if (f.indexOf(n.prefix) === 0) { var p = f.slice(n.prefix.length); u(p) || n.properties.push(p) } } n.Prefix == "Ms" && !("transform" in s) && !("MsTransform" in s) && "msTransform" in s && n.properties.push("transform", "transform-origin"); n.properties.sort() })(); (function () { function i(e, t) { r[t] = ""; r[t] = e; return !!r[t] } var e = { "linear-gradient": { property: "backgroundImage", params: "red, teal" }, calc: { property: "width", params: "1px + 5%" }, element: { property: "backgroundImage", params: "#foo" }, "cross-fade": { property: "backgroundImage", params: "url(a.png), url(b.png), 50%" } }; e["repeating-linear-gradient"] = e["repeating-radial-gradient"] = e["radial-gradient"] = e["linear-gradient"]; var t = { initial: "color", "zoom-in": "cursor", "zoom-out": "cursor", box: "display", flexbox: "display", "inline-flexbox": "display", flex: "display", "inline-flex": "display" }; n.functions = []; n.keywords = []; var r = document.createElement("div").style; for (var s in e) { var o = e[s], u = o.property, a = s + "(" + o.params + ")"; !i(a, u) && i(n.prefix + a, u) && n.functions.push(s) } for (var f in t) { var u = t[f]; !i(f, u) && i(n.prefix + f, u) && n.keywords.push(f) } })(); (function () { function s(e) { i.textContent = e + "{}"; return !!i.sheet.cssRules.length } var t = { ":read-only": null, ":read-write": null, ":any-link": null, "::selection": null }, r = { keyframes: "name", viewport: null, document: 'regexp(".")' }; n.selectors = []; n.atrules = []; var i = e.appendChild(document.createElement("style")); for (var o in t) { var u = o + (t[o] ? "(" + t[o] + ")" : ""); !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o) } for (var a in r) { var u = a + " " + (r[a] || ""); !s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a) } e.removeChild(i) })(); n.valueProperties = ["transition", "transition-property"]; e.className += " " + n.prefix; StyleFix.register(n.prefixCSS) })(document.documentElement);</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
