純CSS建立心形翻轉動畫
阿新 • • 發佈：2019-01-02
首先，需要建立一個元素，程式碼如下
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
<div id="bgCanvas">
<div class="heart-shape"></div>
</div>
</body> 然後，為元素新增樣式，變成心形，程式碼如下：
.heart-shape{
/* 基礎樣式 */
position: relative;
width: 100px;
height: 100px;
background-color: #ff1414;
/* 旋轉 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45 這裡使用了：after和：before偽元素，建立了一個如下效果的心形：
然後使用@keyframs定義一個動畫，程式碼如下：
/* 左心室動畫 */
@keyframes heart-left
{
0% {bottom: 0;left: -50%;}
25% {bottom: 0;left: 50%;}
50% {bottom: 0;left: 50%;}
75% {bottom: 0;left: -50%;}
}
/* 右心室動畫 */
@keyframes heart-right
{
25% {top: -50%;right: 0;}
50% {top: 50%;right: 0;}
75% {top: 50%;right: 0;}
100% {top: -50%;right: 0;}
}
/* Firefox */
@-moz-keyframes heart-left
{
0% {bottom: 0;left: -50%;}
25% {bottom: 0;left: 50%;}
50% {bottom: 0;left: 50%;}
75% {bottom: 0;left: -50%;}
}
/* Safari 和 Chrome */
@-webkit-keyframes heart-left
{
0% {bottom: 0;left: -50%;}
25% {bottom: 0;left: 50%;}
50% {bottom: 0;left: 50%;}
75% {bottom: 0;left: -50%;}
}
/* Opera */
@-o-keyframes heart-left
{
0% {bottom: 0;left: -50%;}
25% {bottom: 0;left: 50%;}
50% {bottom: 0;left: 50%;}
75% {bottom: 0;left: -50%;}
}
/* 右邊 */
@keyframes heart-right
{
25% {top: -50%;right: 0;}
50% {top: 50%;right: 0;}
75% {top: 50%;right: 0;}
100% {top: -50%;right: 0;}
}
/* Firefox */
@-moz-keyframes heart-right
{
25% {top: -50%;right: 0;}
50% {top: 50%;right: 0;}
75% {top: 50%;right: 0;}
100% {top: -50%;right: 0;}
}
/* Safari 和 Chrome */
@-webkit-keyframes heart-right
{
25% {top: -50%;right: 0;}
50% {top: 50%;right: 0;}
75% {top: 50%;right: 0;}
100% {top: -50%;right: 0;}
}
/* Opera */
@-o-keyframes heart-right
{
25% {top: -50%;right: 0;}
50% {top: 50%;right: 0;}
75% {top: 50%;right: 0;}
100% {top: -50%;right: 0;}
}錯開時間改變心形左右兩部分的位置就能夠看起來是翻轉效果。
最後使用animation屬性分別引入動畫，程式碼如下：
/* before的增強樣式 */
.heart-shape:before{
bottom: 0;
left: -50px;
/* 動畫 */
-webkit-animation: heart-left 6s; /* Safari 和 Chrome */
-moz-animation: heart-left 6s; /* Firefox */
-o-animation: heart-left 6s; /* Opera */
animation: heart-left 6s;
/* 規定動畫播放次數 infinite為無限迴圈*/
-webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
animation-iteration-count:infinite;
}
/* after的增強樣式 */
.heart-shape:after{
top: -50px;
right: 0;
/* 動畫 */
-moz-animation: heart-right 6s; /* Firefox */
-webkit-animation: heart-right 6s; /* Safari 和 Chrome */
-o-animation: heart-right 6s; /* Opera */
animation: heart-right 6s;
/* 規定動畫播放次數 infinite為無限迴圈*/
-webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
animation-iteration-count:infinite;
}這樣就實現了心形的翻轉動畫。效果如下：
之後還加了一個JS點選事件，點選大心形的時候會變成隨機個小心形分佈：
var breakHeart = document.getElementsByClassName('heart-shape')[0];
var bgCanvas = document.getElementById('bgCanvas');
this.addEventListener('click',function(e){
//隨機數
var randomNum = Math.round(Math.random()*50);
for (var i =0;i < randomNum; i++) {
//建立小心形
var smallHeart = document.createElement('div');
var rNum = Math.round(Math.random()*50);
//新增類名
smallHeart.className='small-heart';
//插入到頁面中
bgCanvas.appendChild(smallHeart);
//每次旋轉不同角度
smallHeart.style.transform ='rotate('+ rNum+'deg)';
smallHeart.style.left = 160+2*rNum*9+'px';
smallHeart.style.top = 100+rNum*i+'px';
}
breakHeart.style.display = 'none';
},false)CSS程式碼：
.small-heart{
/* 基礎樣式 */
position: absolute;
width: 20px;
height: 20px;
background-color: #ff1414;
/* 旋轉 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* before和after的基礎樣式*/
.small-heart:before,.small-heart:after{
position: absolute;
content: '';
width: 20px;
height: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #ff1414;
}
/* before的增強樣式 */
.small-heart:before{
bottom: 0;
left: -50%;
}
/* after的增強樣式 */
.small-heart:after{
top: -50%;
right: 0;
}點選之後的效果：
