愛心心跳動畫和3d盒子動畫效果
- 愛心心跳動畫效果
- 3d盒子動畫效果
提示
部落客:章飛_906285288
部落格位址:http://blog.csdn.net/qq_29924041
從某機構視訊上面看到的，也就寫了下來
愛心心跳動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
.heart div{width: px;height: px;position: absolute;}
.heart{width: px;height: px;margin: px auto;position: relative;transform: rotate(deg);animation:play s infinite alternate;}
.middle{right: ;bottom: ;background: deeppink}
.left{left: ;bottom: ;background: deeppink;border-radius: %;overflow: hidden}
.right{right: ;top: ;background: deeppink;border-radius: %;overflow: hidden}
.heart p{position: absolute;left: px;top: px;font: bold px/px "";transform: rotate(-deg)}
/*注意要在動畫的時候，可能會導緻覆寫，這個時候也是需要去将其進行旋轉處理的*/
@-webkit-keyframes play {
25%{transform: scale() rotate(deg)}
50%{transform: scale() rotate(deg)}
75%{transform: scale() rotate(deg)}
}
</style>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<p>heart</p>
</div>
</body>
</html>
效果：
細節主要分為兩個方面：
第一是要畫出靜态的愛心，然後進行旋轉，
第二就是動畫效果的設計
注意：動畫效果設計的時候，同樣要設定其旋轉狀态
3d盒子動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
/**大盒子**/
.main{width: px;height: px;box-shadow: px green;margin: px auto;text-align: center;border: px solid transparent;perspective: px}
.main .box{position:relative;width: px;height: px;margin: px auto;transition: s;transform-style:preserve-d;animation: move s infinite alternate;}
.main .box p{position:absolute;width: px;height: px;color: red;box-shadow: px red;font:bolder px/px ""}
.main .box p:nth-child(1){left: ;top: ;transform: translateZ(px)}
.main .box p:nth-child(2){left:-px;top:px;transform: translateZ(px) rotateY(-deg);transform-origin: right}
.main .box p:nth-child(3){left:px;top:px;transform: translateZ(px) rotateY(deg);transform-origin: left}
.main .box p:nth-child(4){left:px;top:px;transform: translateZ(px) rotateX(-deg);transform-origin: top}
.main .box p:nth-child(5){left:px;top:-px;transform: translateZ(px) rotateX(deg); transform-origin: bottom;animation: big_box_play infinite s alternate;}
.main .box p:nth-child(6){left: ;top:;transform: translateZ(-px)}
/**小盒子**/
.main .small_box{position:absolute;width: px;height: px;transition: s;transform-style:preserve-d;animation: small_box_play s infinite alternate;left:calc(% - px);top:calc(% - px)}
.main .small_box p{position:absolute;width: px;height: px;color: red;box-shadow: px red;font:bolder px/px "";background: url("")}
.main .small_box p:nth-child(1){left: ;top: ; background: url("img/1.jpg")no-repeat center/cover;transform: translateZ(px)}
.main .small_box p:nth-child(2){left:-px;top:px; background: url("img/2.jpg")no-repeat center/cover;transform: translateZ(px) rotateY(-deg);transform-origin: right}
.main .small_box p:nth-child(3){left:px;top:px; background: url("img/3.jpg")no-repeat center/cover;transform: translateZ(px) rotateY(deg);transform-origin: left}
.main .small_box p:nth-child(4){left:px;top:px; background: url("img/4.jpg")no-repeat center/cover;transform: translateZ(px) rotateX(-deg);transform-origin: top}
.main .small_box p:nth-child(5){left:px;top:-px; background: url("img/5.jpg")no-repeat center/cover;transform: translateZ(px) rotateX(deg); transform-origin: bottom;}
.main .small_box p:nth-child(6){left: ;top:; background: url("img/6.jpg")no-repeat center/cover;transform: translateZ(-px)}
@-webkit-keyframes small_box_play {
to{transform: rotateY(deg) translateY(-px)}
}
@-webkit-keyframes move {
to{transform: rotateY(deg)}
}
@-webkit-keyframes big_box_play {
to{transform: rotateX(deg) translateZ(px)}
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<div class="small_box">
<p>s_1</p>
<p>s_2</p>
<p>s_3</p>
<p>s_4</p>
<p>s_5</p>
<p>s_6</p>
</div>
</div>
</body>
</html>
動畫效果如下所示、:
