怎么用純css畫一個跳動心

發(fā)布時間：2020-09-14 14:41:02 來源：億速云閱讀：144 作者：小新欄目：web開發(fā)

小編給大家分享一下怎么用純css畫一個跳動心，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

先給大家看效果圖：

怎么用純css畫一個跳動心

實(shí)現(xiàn)原理：

1.可以把這個心分為兩部分，兩個長方形；

怎么用純css畫一個跳動心

分別設(shè)置 border-radius；

怎么用純css畫一個跳動心

讓兩個圖形重合后，分別設(shè)置transform: rotate()，設(shè)置的rotate()值要相反，一個正值，一個負(fù)值；

怎么用純css畫一個跳動心

在設(shè)置其中一個的 left 值就成了

怎么用純css畫一個跳動心

為了看起來有立體感，可以設(shè)置左邊的 box-shadow 陰影；

再配合@keyframes，transform屬性，實(shí)現(xiàn)跳動效果。

代碼實(shí)例：

<!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 偽元素實(shí)現(xiàn)的，沒有考慮兼容性，在 IE 10 之前就顯示不出來了。

可以用 span 元素替換掉 after 和 before 解決掉。

需要加上： -ms-transform 。

若是用 span 元素畫的話，需要右邊的塊設(shè)置 z-index 屬性。

看完了這篇文章，相信你對怎么用純css畫一個跳動心有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

怎么用純css畫一個跳動心

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽