首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >A Simple Scene Animated with CSS3

A Simple Scene Animated with CSS3

作者头像
练小习
发布2017-12-29 11:52:25
6520
发布2017-12-29 11:52:25
举报
文章被收录于专栏:练小习的专栏练小习的专栏

A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3)

Use the button above to start and reset the animation. Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs. This demo was created for this article on Smashing Magazine.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS3 Keyframe Animation Demo</title>

<style>

html,body,div,span,

applet,object,iframe,

h1,h2,h3,h4,h5,h6,p,blockquote,pre,

a,abbr,acronym,address,big,cite,code,

del,dfn,font,img,ins,kbd,q,s,samp,

small,strike,sub,sup,tt,var,

dd,dl,dt,li,ol,ul,

fieldset,form,label,legend,

table,caption,tbody,tfoot,thead,tr,th,td {

margin: 0;

padding: 0;

border: 0;

font-weight: normal;

font-style: normal;

font-size: 100%;

font-family: inherit;

text-align: left;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

ol,ul {

list-style: none;

}

q:before,q:after,

blockquote:before,blockquote:after {

content: "";

}

#container {

width: 1080px;

margin: 0 auto;

overflow: hidden;

padding: 50px 20px 0 20px;

}

h1 {

font-size: 30px;

padding: 0 0 20px 0;

}

h1 span {

font-size: 18px;

}

#left {

overflow: hidden;

float: left;

}

#left p {

width: 470px;

padding: 20px 0 0 0;

font-family: Arial, Helvetica, sans-serif;

}

#sky {

width: 500px;

height: 500px;

position: relative;

z-index: 1;

overflow: hidden;

background-color: #525252;

}

#sky.animate {

-webkit-animation-name: sky;

-webkit-animation-duration: 10s;

-webkit-animation-timing-function: ease;

-webkit-animation-iteration-count: 1;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0;

-webkit-animation-play-state: running;

-webkit-animation-fill-mode: forwards;

-moz-animation-name: sky;

-moz-animation-duration: 10s;

-moz-animation-timing-function: ease;

-moz-animation-iteration-count: 1;

-moz-animation-direction: normal;

-moz-animation-delay: 0;

-moz-animation-play-state: running;

-moz-animation-fill-mode: forwards;

-ms-animation-name: sky;

-ms-animation-duration: 10s;

-ms-animation-timing-function: ease;

-ms-animation-iteration-count: 1;

-ms-animation-direction: normal;

-ms-animation-delay: 0;

-ms-animation-play-state: running;

-ms-animation-fill-mode: forwards;

animation-name: sky;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@-webkit-keyframes sky {

0% {

background-color: #525252;

}

33% {

background-color: #6293e5;

}

66% {

background-color: #6293e5;

}

100% {

background-color: #525252;

}

}

@-moz-keyframes sky {

0% {

background-color: #525252;

}

33% {

background-color: #6293e5;

}

66% {

background-color: #6293e5;

}

100% {

background-color: #525252;

}

}

@-ms-keyframes sky {

0% {

background-color: #525252;

}

33% {

background-color: #6293e5;

}

66% {

background-color: #6293e5;

}

100% {

background-color: #525252;

}

}

@keyframes sky {

0% {

background-color: #525252;

}

33% {

background-color: #6293e5;

}

66% {

background-color: #6293e5;

}

100% {

background-color: #525252;

}

}

#ground {

position: absolute;

bottom: 0;

left: 0;

width: 500px;

height: 154px;

background: #6c5228;

z-index: 4;

}

#ground.animate {

-webkit-animation-name: ground;

-webkit-animation-duration: 10s;

-webkit-animation-timing-function: ease;

-webkit-animation-iteration-count: 1;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0;

-webkit-animation-play-state: running;

-webkit-animation-fill-mode: forwards;

-moz-animation-name: ground;

-moz-animation-duration: 10s;

-moz-animation-timing-function: ease;

-moz-animation-iteration-count: 1;

-moz-animation-direction: normal;

-moz-animation-delay: 0;

-moz-animation-play-state: running;

-moz-animation-fill-mode: forwards;

-ms-animation-name: ground;

-ms-animation-duration: 10s;

-ms-animation-timing-function: ease;

-ms-animation-iteration-count: 1;

-ms-animation-direction: normal;

-ms-animation-delay: 0;

-ms-animation-play-state: running;

-ms-animation-fill-mode: forwards;

animation-name: ground;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@-webkit-keyframes ground {

0% {

background: #6c5228;

}

33% {

background: #48a037;

}

66% {

background: #48a037;

}

100% {

background: #6c5228;

}

}

@-moz-keyframes ground {

0% {

background: #6c5228;

}

33% {

background: #48a037;

}

66% {

background: #48a037;

}

100% {

background: #6c5228;

}

}

@-ms-keyframes ground {

0% {

background: #6c5228;

}

33% {

background: #48a037;

}

66% {

background: #48a037;

}

100% {

background: #6c5228;

}

}

@keyframes ground {

0% {

background: #6c5228;

}

33% {

background: #48a037;

}

66% {

background: #48a037;

}

100% {

background: #6c5228;

}

}

#sun {

background: #ffd630;

width: 130px;

height: 130px;

position: absolute;

border-radius: 70px;

z-index: 2;

bottom: 0;

left: 340px;

}

#sun.animate {

-webkit-animation-name: sunrise;

-webkit-animation-duration: 10s;

-webkit-animation-timing-function: ease;

-webkit-animation-iteration-count: 1;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0;

-webkit-animation-play-state: running;

-webkit-animation-fill-mode: forwards;

-moz-animation-name: sunrise;

-moz-animation-duration: 10s;

-moz-animation-timing-function: ease;

-moz-animation-iteration-count: 1;

-moz-animation-direction: normal;

-moz-animation-delay: 0;

-moz-animation-play-state: running;

-moz-animation-fill-mode: forwards;

-ms-animation-name: sunrise;

-ms-animation-duration: 10s;

-ms-animation-timing-function: ease;

-ms-animation-iteration-count: 1;

-ms-animation-direction: normal;

-ms-animation-delay: 0;

-ms-animation-play-state: running;

-ms-animation-fill-mode: forwards;

animation-name: sunrise;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@-webkit-keyframes sunrise {

0% {

bottom: 0;

left: 340px;

background: #f00;

}

33% {

bottom: 340px;

left: 340px;

background: #ffd630;

}

66% {

bottom: 340px;

left: 40px;

background: #ffd630;

}

100% {

bottom: 0;

left: 40px;

background: #f00;

}

}

@-moz-keyframes sunrise {

0% {

bottom: 0;

left: 340px;

background: #f00;

}

33% {

bottom: 340px;

left: 340px;

background: #ffd630;

}

66% {

bottom: 340px;

left: 40px;

background: #ffd630;

}

100% {

bottom: 0;

left: 40px;

background: #f00;

}

}

@-ms-keyframes sunrise {

0% {

bottom: 0;

left: 340px;

background: #f00;

}

33% {

bottom: 340px;

left: 340px;

background: #ffd630;

}

66% {

bottom: 340px;

left: 40px;

background: #ffd630;

}

100% {

bottom: 0;

left: 40px;

background: #f00;

}

}

@keyframes sunrise {

0% {

bottom: 0;

left: 340px;

background: #f00;

}

33% {

bottom: 340px;

left: 340px;

background: #ffd630;

}

66% {

bottom: 340px;

left: 40px;

background: #ffd630;

}

100% {

bottom: 0;

left: 40px;

background: #f00;

}

}

#cloud {

position: relative;

top: 50px;

left: -100px;

opacity: 0;

z-index: 3;

}

#cloud.animate {

-webkit-animation-name: cloud;

-webkit-animation-duration: 12s;

-webkit-animation-timing-function: ease;

-webkit-animation-iteration-count: 1;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0;

-webkit-animation-play-state: running;

-webkit-animation-fill-mode: forwards;

-moz-animation-name: cloud;

-moz-animation-duration: 12s;

-moz-animation-timing-function: ease;

-moz-animation-iteration-count: 1;

-moz-animation-direction: normal;

-moz-animation-delay: 0;

-moz-animation-play-state: running;

-moz-animation-fill-mode: forwards;

-ms-animation-name: cloud;

-ms-animation-duration: 12s;

-ms-animation-timing-function: ease;

-ms-animation-iteration-count: 1;

-ms-animation-direction: normal;

-ms-animation-delay: 0;

-ms-animation-play-state: running;

-ms-animation-fill-mode: forwards;

animation-name: cloud;

animation-duration: 12s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@-webkit-keyframes cloud {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 1;

left: 60px;

}

75% {

opacity: 1;

left: 100px;

}

100% {

opacity: 0;

left: 500px;

}

}

@-moz-keyframes cloud {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 1;

left: 60px;

}

75% {

opacity: 1;

left: 100px;

}

100% {

opacity: 0;

left: 500px;

}

}

@-ms-keyframes cloud {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 1;

left: 60px;

}

75% {

opacity: 1;

left: 100px;

}

100% {

opacity: 0;

left: 500px;

}

}

@keyframes cloud {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 1;

left: 60px;

}

75% {

opacity: 1;

left: 100px;

}

100% {

opacity: 0;

left: 500px;

}

}

.cloud {

border-radius: 90px / 30px;

width: 160px;

height: 50px;

background: #fff;

position: absolute;

top: 10px;

}

.cloud-2 {

left: 50px;

top: 0;

}

.cloud-3 {

left: 110px;

top: 20px;

}

#moon {

position: relative;

opacity: 0;

top: 50px;

left: -100px;

}

#moon.animate {

-webkit-animation-name: moon;

-webkit-animation-duration: 10s;

-webkit-animation-timing-function: ease;

-webkit-animation-iteration-count: 1;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0;

-webkit-animation-play-state: running;

-webkit-animation-fill-mode: forwards;

-moz-animation-name: moon;

-moz-animation-duration: 10s;

-moz-animation-timing-function: ease;

-moz-animation-iteration-count: 1;

-moz-animation-direction: normal;

-moz-animation-delay: 0;

-moz-animation-play-state: running;

-moz-animation-fill-mode: forwards;

-ms-animation-name: moon;

-ms-animation-duration: 10s;

-ms-animation-timing-function: ease;

-ms-animation-iteration-count: 1;

-ms-animation-direction: normal;

-ms-animation-delay: 0;

-ms-animation-play-state: running;

-ms-animation-fill-mode: forwards;

animation-name: moon;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@-webkit-keyframes moon {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 0;

left: -100px;

}

90% {

opacity: 0;

left: -100px;

}

100% {

opacity: 1;

left: 50px;

}

}

@-moz-keyframes moon {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 0;

left: -100px;

}

90% {

opacity: 0;

left: -100px;

}

100% {

opacity: 1;

left: 50px;

}

}

@-ms-keyframes moon {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 0;

left: -100px;

}

90% {

opacity: 0;

left: -100px;

}

100% {

opacity: 1;

left: 50px;

}

}

@keyframes moon {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 0;

left: -100px;

}

90% {

opacity: 0;

left: -100px;

}

100% {

opacity: 1;

left: 50px;

}

}

.moon {

width: 100px;

height: 100px;

border-radius: 50px;

background: #fff;

position: absolute;

}

.moon-2 {

background: #525252;

position: absolute;

top: -20px;

left: 20px;

}

#code {

float: left;

margin: 0 0 0 20px;

width: 494px;

}

ul.headers {

overflow: hidden;

}

ul.headers li {

float: left;

width: 85px;

border: dashed 1px #ccc;

margin: 0 4px;

}

ul.headers li a {

display: block;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

text-align: center;

padding: 10px;

}

ul.headers li a:hover, ul.headers li a:active {

background: #ccc;

color: #fff;

}

#tab_content {

border: #ccc 1px dashed;

margin: 20px 0 20px 3px;

padding: 0 0 20px 10px;

width: 456px;

}

div.tab {

font-family: Arial, Helvetica, sans-serif;

margin: 30px 0 0 10px;

}

div.tab pre {

font-family: "Courier New", Courier, monospace;

font-size: 13px;

}

input[type="button"] {

margin: 20px 0 0 165px;

padding: 5px;

}

</style>

</head>

<body style="width: 98%;">

<div id="container">

<h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1>

<div id="left">

<div id="sky" class="target">

<div id="cloud" class="target">

<div class="cloud cloud-1"></div>

<div class="cloud cloud-2"></div>

<div class="cloud cloud-3"></div>

</div>

<div id="sun" class="target"></div>

<div id="moon" class="target">

<div class="moon">

</div>

<div class="moon moon-2">

</div>

</div>

<div id="ground" class="target"></div>

</div><!-- #sky -->

<input type="button" value="ANIMATE THE SCENE" id="startbutton">

<p><strong>Use the button above to start and reset the animation.</strong></p>

<p>Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.</p>

<p>This demo was created for <a href="http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/">this article</a> on Smashing Magazine.</p>

</div><!-- #left -->

<div id="code">

<div id="sidebar_tabs">

<ul class="headers">

<li><a href="#" class="tablink">Sun</a></li>

<li><a href="#" class="tablink">Sky</a></li>

<li><a href="#" class="tablink">Ground</a></li>

<li><a href="#" class="tablink">Cloud</a></li>

<li><a href="#" class="tablink">Moon</a></li>

</ul>

<div id="tab_content">

<div class="tab tab1">

<pre>

#sun.animate {

animation-name: sunrise;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@keyframes sunrise {

0% {

bottom: 0;

left: 340px;

background: #f00;

}

33% {

bottom: 340px;

left: 340px;

background: #ffd630;

}

66% {

bottom: 340px;

left: 40px;

background: #ffd630;

}

100% {

bottom: 0;

left: 40px;

background: #f00;

}

}

</pre>

</div>

<div class="tab tab2">

<pre>

#sky.animate {

animation-name: sky;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@keyframes sky {

0% {

background-color: #525252;

}

33% {

background-color: #6293e5;

}

66% {

background-color: #6293e5;

}

100% {

background-color: #525252;

}

}

</pre>

</div>

<div class="tab tab3">

<pre>

#ground.animate {

animation-name: ground;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@keyframes ground {

0% {

background: #6c5228;

}

33% {

background: #48a037;

}

66% {

background: #48a037;

}

100% {

background: #6c5228;

}

}

</pre>

</div>

<div class="tab tab4">

<pre>

#cloud.animate {

animation-name: cloud;

animation-duration: 12s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@keyframes cloud {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 1;

}

75% {

opacity: 1;

left: 100px;

}

100% {

opacity: 0;

left: 500px;

}

}

</pre>

</div>

<div class="tab tab5">

<pre>

#moon.animate {

animation-name: moon;

animation-duration: 10s;

animation-timing-function: ease;

animation-iteration-count: 1;

animation-direction: normal;

animation-delay: 0;

animation-play-state: running;

animation-fill-mode: forwards;

}

@keyframes moon {

0% {

opacity: 0;

left: -100px;

}

50% {

opacity: 0;

left: -100px;

}

90% {

opacity: 0;

left: -100px;

}

100% {

opacity: 1;

left: 50px;

}

}</pre>

</div>

</div><!-- #tab_content -->

</div><!-- #sidebar_tabs -->

</div><!-- #code -->

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

$(function () {

var s = null,

AnimationSpace = {

settings: {

tabHeaders: null,

tabSections: null,

currentIndex: null,

speed: 800,

collection: null,

i: null,

j: null,

startButton: $("#startbutton")

},

init: function () {

s = this.settings;

s.tabSections = $("div.tab");

$(s.tabSections[0]).slideDown(s.speed);

$(s.tabSections[1]).slideUp(s.speed);

$(s.tabSections[2]).slideUp(s.speed);

$(s.tabSections[3]).slideUp(s.speed);

$(s.tabSections[4]).slideUp(s.speed);

this.getClickedTab();

this.startAnimation();

},

getClickedTab: function () {

s = this.settings;

s.tabHeaders = $("#sidebar_tabs ul.headers a");

s.collection = $("#tab_content div.tab");

$(s.tabHeaders).click(function () {

s.currentIndex = $(this).parent().index();

for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {

if (s.i !== s.currentIndex) {

$(s.tabSections[s.i]).slideUp(s.speed);

} else {

$(s.tabSections[s.i]).slideDown(s.speed);

}

}

return false;

});

},

startAnimation: function () {

s = this.settings;

s.startButton.click(function() {

$("div.target").toggleClass("animate");

if (s.startButton.attr("value") === "ANIMATE THE SCENE") {

s.startButton.attr("value", "RESET THE ANIMATION");

} else {

s.startButton.attr("value", "ANIMATE THE SCENE");

}

});

}

};

AnimationSpace.init();

});

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档