css3实现苹果WWDC标志动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现苹果WWDC标志动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css3实现苹果WWDC标志动画特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
<article class="wwdc15">
	<span class="large-circles">
		<div class="large circle one"></div>
		<div class="large circle two"></div>
		<div class="large circle three"></div>
		<div class="large circle four"></div>
		<div class="large circle five"></div>
		<div class="large circle six"></div>
		<div class="large circle seven"></div>
		<div class="large circle eight"></div>
	</span>
	<span class="small-shapes">
		<div class="small circle one"></div>
		<div class="small squircle two"></div>
		<div class="small circle three"></div>
		<div class="small squircle four"></div>
		<div class="small circle five"></div>
		<div class="small squircle six"></div>
		<div class="small circle seven"></div>
		<div class="small squircle eight"></div>
	</span>
	<span class="content-squircle">
		<div class="large squircle one"></div>
	</span>
    <div class="large squircle two">
        <div class="content">
            <svg viewBox="0 0 160 164" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <g id="svg_1">
                        <path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/>
                    </g>
                </g>
            </svg>
            <h1>The epicenter of change.</h1>
            <p><strong>WWDC</strong>15</p>
        </div>
    </div>
</article>
</body>
</html>

CSS代码(style.css):

body{background:#fff;font-family:'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;font-size:24px;}
.wwdc15{font-family:'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;font-size:24px;}
.wwdc15 span{display:block;position:absolute;top:-webkit-calc(50% - 10em);top:calc(50% - 10em);left:-webkit-calc(50% - 10em);left:calc(50% - 10em);width:20em;height:20em;}
.wwdc15 .large-circles{-webkit-animation:spin 10s linear infinite;animation:spin 10s linear infinite;}
.wwdc15 .small-shapes{-webkit-animation:spin 30s linear infinite;animation:spin 30s linear infinite;}
.wwdc15 .content-squircle{-webkit-animation:spin-pulse 20s linear infinite;animation:spin-pulse 20s linear infinite;}
@-webkit-keyframes spin{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0);}
100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);}
}
@keyframes spin{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0);}
100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);}
}
@-webkit-keyframes spin-pulse{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0);}
50%{-webkit-transform:scale(0.9) rotateZ(180deg);transform:scale(0.9) rotateZ(180deg);}
100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg);}
}
@keyframes spin-pulse{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0);}
50%{-webkit-transform:scale(0.9) rotateZ(180deg);transform:scale(0.9) rotateZ(180deg);}
100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg);}
}
.wwdc15 .circle{border-radius:50%;left:-webkit-calc(50% - 6.25em);left:calc(50% - 6.25em);top:-webkit-calc(50% - 12.5em);top:calc(50% - 12.5em);-webkit-transform-origin:50% 12.5em;-ms-transform-origin:50% 12.5em;transform-origin:50% 12.5em;}
.wwdc15 .squircle{border-radius:25%;}
.wwdc15 .circle,.wwdc15 .squircle{width:12.5em;height:12.5em;position:absolute;border-top:0.1em solid rgba(255,255,255,0.4);}
.wwdc15 .large.circle{-webkit-box-shadow:0 1em 2em rgba(0,0,0,0.5);box-shadow:0 1em 2em rgba(0,0,0,0.5);}
.wwdc15 .small{width:4em;height:4em;left:-webkit-calc(50% - 2em);left:calc(50% - 2em);top:-webkit-calc(50% - 15em);top:calc(50% - 15em);-webkit-transform-origin:50% 15em;-ms-transform-origin:50% 15em;transform-origin:50% 15em;-webkit-box-shadow:0 0.25em 0.5em rgba(0,0,0,0.2);box-shadow:0 0.25em 0.5em rgba(0,0,0,0.2);}
.wwdc15 .one{background:rgba(16,63,236,0.75);-webkit-transform:rotateZ(225deg);transform:rotateZ(225deg);}
.wwdc15 .two{background:rgba(37,172,162,0.75);-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);}
.wwdc15 .three{background:rgba(233,124,32,0.75);-webkit-transform:rotateZ(135deg);transform:rotateZ(135deg);}
.wwdc15 .four{background:rgba(235,67,35,0.75);-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.wwdc15 .five{background:rgba(190,28,65,0.75);-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.wwdc15 .six{background:rgba(208,57,159,0.75);-webkit-transform:rotateZ(0);transform:rotateZ(0);}
.wwdc15 .seven{background:rgba(150,32,198,0.75);-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg);}
.wwdc15 .eight{background:rgba(95,33,203,0.75);-webkit-transform:rotateZ(-90deg);transform:rotateZ(-90deg);}
.wwdc15 .small.squircle{background:none;border:none;-webkit-box-shadow:none;box-shadow:none;}
.wwdc15 .small.squircle::after{content:"";border-radius:25%;width:100%;height:100%;position:absolute;background:red;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg);-webkit-box-shadow:-0.25em 0.25em 0.5em rgba(0,0,0,0.2);box-shadow:-0.25em 0.25em 0.5em rgba(0,0,0,0.2);}
.wwdc15 .small.squircle.two::after{background:rgba(37,172,162,0.75);}
.wwdc15 .small.squircle.four::after{background:rgba(235,67,35,0.75);}
.wwdc15 .small.squircle.six::after{background:rgba(208,57,159,0.75);}
.wwdc15 .small.squircle.eight::after{background:rgba(95,33,203,0.75);}
.wwdc15 .large.squircle{position:absolute;background:rgba(30,7,66,0.65);border:none;left:-webkit-calc(50% - 7.5em);left:calc(50% - 7.5em);top:-webkit-calc(50% - 7.5em);top:calc(50% - 7.5em);width:15em;height:15em;-webkit-transform:none;-ms-transform:none;transform:none;}
.wwdc15 .large.squircle.one{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.wwdc15 .content{text-align:center;}
.wwdc15 .content svg{fill:#fff;width:3em;margin:1.25em auto 1em;}
.wwdc15 .content h1{font-weight:lighter;font-size:1.75em;margin:0.25em auto 1em;max-width:6em;}
.circles .wwdc15.centered .circle{-webkit-transform:rotateZ(0);transform:rotateZ(0);-webkit-box-shadow:none !important;box-shadow:none !important;}
.circles .wwdc15.centered span{-webkit-animation:animateup 2s linear forwards;animation:animateup 2s linear forwards;}
.circles .wwdc15 .large.circle{-webkit-transition:all 1s ease-out;transition:all 1s ease-out;-webkit-box-shadow:none !important;box-shadow:none !important;}
.circles .wwdc15 .large.circle:nth-child(8){-webkit-transition-duration:1s;transition-duration:1s;}
.circles .wwdc15 .large.circle:nth-child(7){-webkit-transition-duration:1.1s;transition-duration:1.1s;}
.circles .wwdc15 .large.circle:nth-child(6){-webkit-transition-duration:1.2s;transition-duration:1.2s;}
.circles .wwdc15 .large.circle:nth-child(5){-webkit-transition-duration:1.3s;transition-duration:1.3s;}
.circles .wwdc15 .large.circle:nth-child(4){-webkit-transition-duration:1.4s;transition-duration:1.4s;}
.circles .wwdc15 .large.circle:nth-child(3){-webkit-transition-duration:1.5s;transition-duration:1.5s;}
.circles .wwdc15 .large.circle:nth-child(2){-webkit-transition-duration:1.6s;transition-duration:1.6s;}
.circles .wwdc15 .large.circle:nth-child(1){-webkit-transition-duration:1.7s;transition-duration:1.7s;}
@-webkit-keyframes animateup{0%{-webkit-transform:translateY(6.25em);transform:translateY(6.25em);}
100%{-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes animateup{0%{-webkit-transform:translateY(6.25em);transform:translateY(6.25em);}
100%{-webkit-transform:translateY(0);transform:translateY(0);}
}
/* ������ */
.message{position:absolute;left:1em;bottom:1em;right:0;color:#222;text-align:left;}
.message a{text-decoration:none;font-weight:bold;color:#999;}

附件:下载该文件资源,减少时间成本(增值服务)