搜尋
首頁web前端css教學手把手教你用css製作一個簡單的心跳效果(程式碼詳解)

之前的文章《手把手教你怎麼使用css3為文字添加動畫效果(附代碼)》中,跟大家介紹怎麼使用css3為文字添加動畫效果。以下這篇文章跟大家介紹怎麼使用css製作一個簡單的心跳效果,我們一起看看怎麼做。

手把手教你用css製作一個簡單的心跳效果(程式碼詳解)

ccs製作一個簡單的心跳效果的方法,添加一個盒子,充分利用ccs展現就可以啦。

1、首先我們在頁面新增一個視覺化的盒子,建立新一個文檔,寫程式碼先用<div class="heart"></div>這串程式碼在框架<div>標籤。 <p>程式碼範例</p><pre class='brush:php;toolbar:false;'> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><p> Html程式碼完成。 </p> <p>2、先將它變成一顆心,使用<code>css設定動畫及字體樣式,heart屬性使用將動畫與div元素綁定,下面給大家怎麼寫程式碼,使用head標籤之間加入<style type></style>這串程式碼然後在style標籤中輸入*lia文字的邊框外部和元素距離為0、預設值、掉刪下劃線,程式碼範例。

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

3、接著,使用head標籤之間加入heart這串程式碼然後在style標籤中輸入文字的相對定位、寬度、高度、外邊距屬性可以有14個值、過渡動畫,程式碼範例

*{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 匀速 无限循环*/

4、最後設定動畫animation,這裡要說一下animation必須和@keyframes一起用,繼續用head標籤之間在style標籤中輸入絕對定位、寬度、高度、顏色、content屬性、外邊框圓角、旋轉元素,程式碼範例

.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製作一個簡單的心跳效果(程式碼詳解)

效果出來了,有點意思,想變成美的伙伴們可以自己去修改,畢竟審美功力有限,大家審美眾口難調,畢竟我也做不到所有人都認可我,我只有努力把作品盡了量的完善。

【完】

推薦學習:

CSS3影片教學#

以上是手把手教你用css製作一個簡單的心跳效果(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
' CSS4”更新' CSS4”更新Apr 11, 2025 pm 12:05 PM

自從我第一次介紹了CSS4面中的事情以來,就已經進行了更多的討論。我將在這裡從其他人那裡匯集我最喜歡的想法。有

三種代碼三種代碼Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時,我都會將我正在查看的代碼分為三種類型,或者如果您願意的話。我認為這些類型可以應用於

https很容易!https很容易!Apr 11, 2025 am 11:51 AM

我對公開哀悼HTTPS的複雜性感到內gui。過去,我從第三方供應商那裡購買了SSL證書,並且遇到了麻煩

HTML數據屬性指南HTML數據屬性指南Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

了解JavaScript中的不變性了解JavaScript中的不變性Apr 11, 2025 am 11:47 AM

如果您以前從未在JavaScript中使用不變性,則可能會發現很容易將其與為新值或重新分配分配變量的混淆。

具有現代CSS功能的定製樣式表單輸入具有現代CSS功能的定製樣式表單輸入Apr 11, 2025 am 11:45 AM

如今,可以在語義上且易於訪問的同時構建自定義的複選框,無線電按鈕和切換開關。我們甚至不需要

腳註字符腳註字符Apr 11, 2025 am 11:34 AM

有特殊的超級數字字符有時非常適合腳註。他們在這裡:

如何使用HTML,CSS和JavaScript創建動畫倒計時計時器如何使用HTML,CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境