本章帶給大家如何用純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中文網其他相關文章！
每周平台新聞：CSS :: Marker偽元素，預先渲染的Web組件，向您的網站添加WebmentionApr 19, 2025 am 11:25 AM在本週的綜述中：datepickers正在讓鍵盤用戶頭痛，一個新的Web組件編譯器，有助於與Fouc進行戰鬥，我們終於獲得了造型列表項目標記，以及在您的網站上獲得網絡攻擊的四個步驟。
每周平台新聞：HTML在搜索控制台，全局腳本範圍中的HTML檢查，Babel Envs添加默認查詢查詢Apr 19, 2025 am 11:18 AM在本週的Web平台新聞世界中，Google搜索控制台可以更輕鬆地查看爬行的標記，我們了解到自定義屬性
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3漢化版
中文版，非常好用
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Atom編輯器mac版下載
最受歡迎的的開源編輯器
禪工作室 13.0.1
強大的PHP整合開發環境
