如何用純css畫一個跳動心?（程式碼實例）
- 青灯夜游原創
- 2018-09-13 16:42:512596瀏覽
本章帶給大家如何用純css畫一個跳動心？ （程式碼實例）,有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
先給大家看效果圖：
實作原理：
1.可以把這個心分成兩個部分，兩個長方形；
分別設定border-radius;
#讓兩個圖形重合後，分別設定transform: rotate ()，設定的rotate()值要相反，一個正值，一個負值；
在設定其中一個的left 值就變成了
為了看起來有立體感，可以設定左邊的 box-shadow 陰影；
再配合@keyframes，transform屬性，實現跳動效果。
程式碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯css画一下心</title>
<style>
body{
height: 100%;
margin: 0;
}
.demo{
width: 1px;
height: 1px;
margin: 300px auto;
position: relative;
animation: tiaodong .8s linear infinite;
}
.demo::before,.demo::after{
content: '';
position: absolute;
width: 80px;
height: 120px;
background-color: red;
border-radius: 50px 50px 0 0;
}
.demo::after{
left: 28px;
transform: rotate(45deg);
}
.demo::before{
transform: rotate(-45deg);
box-shadow: -5px -5px 10px grey;
}
@keyframes tiaodong{
0%{
transform: scale(1);
}
50%{
transform: scale(1.05);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>用的是 after 和 before 偽元素實現的，沒有考慮相容性，在 IE 10 之前就顯示不出來了。
可以用 span 元素替換掉 after 和 before 解決掉。
需要加上： -ms-transform 。
若是用 span 元素畫的話，需要右邊的方塊設定 z-index 屬性。
以上是如何用純css畫一個跳動心?（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn