怎么用css制作一個簡單的愛心效果

發(fā)布時間：2021-08-24 15:07:56 來源：億速云閱讀：214 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用css制作一個簡單的愛心效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用css制作一個簡單的愛心效果”吧！

ccs制作一個簡單的心跳效果的方法，添加一個盒子，充分利用ccs展現(xiàn)就可以啦。

1、首先我們在頁面添加一個可視化的盒子，創(chuàng)建新一個文檔，寫代碼先用<div class="heart"></div>這串代碼在框架<div>標(biāo)簽。

代碼示例

 <body>
	<div class="heart"></div>
 </body>

Html代碼完成。

2、將它先變成一顆心，使用css設(shè)置動畫及字體樣式，heart屬性使用將動畫與div元素綁定，下面給大家怎么寫代碼，使用head標(biāo)簽之間加入<style type"text/css"></style>這串代碼然后在style標(biāo)簽中輸入*、li、a文本的邊框外部和元素距離為0、默認(rèn)值、掉刪下劃線，代碼示例。

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3、接著，使用head標(biāo)簽之間加入heart這串代碼然后在style標(biāo)簽中輸入文本的相對定位、寬度、高度、外邊距屬性可以有1到4個值、過渡動畫，代碼示例

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
 
.heart{
position:relative;
width:100px; 
height:100px;
margin:100px;
animation:scale 1s linear infinite;  
/*名稱 1s 勻速 無限循環(huán)*/

4、最后設(shè)置一下動畫animation，這里要說一下animation必須和@keyframes一起用，繼續(xù)用head標(biāo)簽之間在style標(biāo)簽中輸入絕對定位、寬度、高度、顏色、content屬性、外邊框圓角、旋轉(zhuǎn)元素，代碼示例

.heart:after,
.heart:before{
position:absolute;
width:70px;
height:100%;
background-color:red;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);

代碼效果

怎么用css制作一個簡單的愛心效果

5、我們讓它水平垂直兩倍縮放

代碼示例

@keyframes scale{ /*動畫幀*/ 50%{transform:scale(2)} }

代碼效果

怎么用css制作一個簡單的愛心效果

感謝各位的閱讀，以上就是“怎么用css制作一個簡單的愛心效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用css制作一個簡單的愛心效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

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

怎么用css制作一個簡單的愛心效果

猜你喜歡

最新資訊

相關(guān)推薦

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