放上做的兩個小的css3動畫，先附上簡單的靜態圖：
以下是我的github上的動畫效果
高階立方體：
yangyufei.github.io/css3/html/%…
幸福摩天輪:
yangyufei.github.io/css3/html/%…
高階立方體程式碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3高階立方體</title>
<style>
.wrap {
width: 200px;
margin: 0 auto;
/*設定視角*/
-webkit-perspective: 800;
-webkit-transition: all 1s linear;
/*如果不設定預設為無限遠的距離，設定不同的視角大小，指的是距離物體的px值。將視角設定不同的層級上面也會有不同的效果*/
}
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto 0;
-webkit-transform-style: preserve-3d;
/*-webkit-transform: rotateX(30deg) rotateY(75deg);*/
-webkit-animation: bg-change 3s linear infinite;
/*通常是放在父級 將變形的樣式設定為3d樣式*/
}
.wrap:hover .cube div:nth-child(1){
-webkit-transform: translateZ(200px);
}
.wrap:hover .cube div:nth-child(2){
-webkit-transform: rotateY(180deg) translateZ(200px);
}
.wrap:hover .cube div:nth-child(3){
-webkit-transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover .cube div:nth-child(4){
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
.wrap:hover .cube div:nth-child(5){
-webkit-transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover .cube div:nth-child(6){
-webkit-transform: rotateX(-90deg) translateZ(200px);
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
/*-webkit-backface-visibility: hidden; *//*背部隱藏，解決透視效果*/
}
@-webkit-keyframes bg-change {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg);
}
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
}
/*前後面*/
.cube div:nth-child(1){
background: url(../images/1.png) center center no-repeat;
background-size: contain;
-webkit-transform: translateZ(100px);
-webkit-transition: all 1s linear;
}
.cube div:nth-child(2){
background: url(../images/2.png) center center no-repeat;
background-size: contain;
-webkit-transform: rotateY(180deg) translateZ(100px);
-webkit-transition: all 1s linear;
}
/*左右面*/
.cube div:nth-child(3){
background: url(../images/3.png) center center no-repeat;
background-size: contain;
-webkit-transform: rotateY(90deg) translateZ(100px);
-webkit-transition: all 1s linear;
}
.cube div:nth-child(4){
background: url(../images/4.png) center center no-repeat;
background-size: contain;
-webkit-transform: rotateY(-90deg) translateZ(100px);
-webkit-transition: all 1s linear;
}
/*上下面*/
.cube div:nth-child(5){
background: url(../images/5.png) center center no-repeat;
background-size: contain;
-webkit-transform: rotateX(90deg) translateZ(100px);
-webkit-transition: all 1s linear;
}
.cube div:nth-child(6){
background: url(../images/6.png) center center no-repeat;
background-size: contain;
-webkit-transform: rotateX(-90deg) translateZ(100px);
-webkit-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<script></script>
</body>
</html>複製程式碼幸福摩天輪程式碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3幸福摩天輪</title>
<style>
body,html {
width: 100%;
height: 100%;
}
.wrap {
height: 100%;
background: url(../images/2.jpg) center center no-repeat;
}
.con {
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
}
.outer {
position: relative;
z-index: 1;
width: 600px;
height: 600px;
background: url("../images/fsw.png") center center no-repeat;
background-size: contain;
-webkit-animation: bg-change 6s linear infinite;
}
@-webkit-keyframes bg-change {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
.font {
position: absolute;
z-index: 2;
top: 150px;
left: 100px;
width: 400px;
height: 250px;
background: url("../images/big-title.png") center center no-repeat;
background-size: contain;
}
.outer div {
width: 100px;
height: 100px;
}
.outer div:nth-child(1) {
position: absolute;
z-index: 1;
top: 0px;
left: 250px;
background: url(../images/dog.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(2) {
position: absolute;
z-index: 1;
top: 100px;
left: 440px;
background: url(../images/girl.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(3) {
position: absolute;
z-index: 1;
top: 280px;
left: 530px;
background: url(../images/boy.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(4) {
position: absolute;
z-index: 1;
top: 480px;
left: 450px;
background: url(../images/girls.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(5) {
position: absolute;
z-index: 1;
top: 570px;
left: 250px;
background: url(../images/hairboy.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(6) {
position: absolute;
z-index: 1;
top: 480px;
left: 50px;
background: url(../images/mimi.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(7) {
position: absolute;
z-index: 1;
top: 280px;
left: -20px;
background: url(../images/mudog.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
.outer div:nth-child(8) {
position: absolute;
z-index: 1;
top: 120px;
left: 50px;
background: url(../images/mimi.png) center center no-repeat;
background-size: contain;
-webkit-animation: rot 6s linear infinite;
}
@-webkit-keyframes rot {
from {
-webkit-transform: rotateZ(360deg);
-webkit-transform-origin: 50% top;
}
to {
-webkit-transform: rotateZ(0deg);
-webkit-transform-origin: 50% top;
}
}
.inner {
position: absolute;
top: 300px;
left: 200px;
width: 200px;
height: 400px;
background: url(../images/bracketsmall.png) center center no-repeat;
}
</style>
</head>
<body>
<div class="wrap">
<div class="con">
<div class="outer clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="font clearfix">
</div>
<div class="inner"></div>
</div>
</div>
<script></script>
</body>
</html>複製程式碼今天寫完這篇博文很開心，因為我今天懂得怎麼弄掘金的連結，怎麼弄程式碼塊了，掘金確實是比網易部落格好用多了，哈哈哈哈哈哈~~~