CSS3紅色愛心跳動(dòng)動(dòng)畫代碼
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ffa5a5;
/*
定義body 漸變，向頁(yè)面。
*/
/*background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);*/
}
.chest {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.heart {
position: absolute;
z-index: 2;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
animation: beat 0.7s ease 0s infinite normal;
}
.heart.center {
background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
}
.heart.top {
z-index: 3;
}
這是一款基于css3 animation屬性實(shí)現(xiàn)的CSS3紅色愛心跳動(dòng)動(dòng)畫代碼，很有心跳感覺的愛心動(dòng)畫特效。
本站所有資源均由網(wǎng)友貢獻(xiàn)或各大下載網(wǎng)站轉(zhuǎn)載。請(qǐng)自行檢查軟件的完整性！本站所有資源僅供學(xué)習(xí)參考。請(qǐng)不要將它們用于商業(yè)目的。否則，一切后果由您負(fù)責(zé)！如有侵權(quán)，請(qǐng)聯(lián)系我們刪除。聯(lián)系方式：admin@php.cn
相關(guān)文章
愛心符號(hào) c 愛心跳動(dòng)代碼分享
04 Apr 2025
用C 代碼繪制跳動(dòng)愛心，通過循環(huán)不斷改變心形大小和位置，配合ClearDevice()清除屏幕，就能讓愛心模擬出跳動(dòng)效果。采用EasyX圖形庫(kù)，利用正弦函數(shù)控制變化以模擬跳動(dòng)，但需要減少ClearDevice()調(diào)用次數(shù)并合理設(shè)置延時(shí)參數(shù)。該代碼可作為基礎(chǔ)，通過定制顏色、特效和旋轉(zhuǎn)等進(jìn)一步完善。同時(shí)強(qiáng)調(diào)代碼可讀性、可維護(hù)性和編程的樂趣。
CSS3 `transition: all` 是否比針對(duì)特定屬性的效率低？
07 Dec 2024
CSS3 過渡：“transition: all”比針對(duì)特定屬性的效率低嗎？使用 CSS3 過渡時(shí)，...
如何在沒有硬編碼值的情況下創(chuàng)建響應(yīng)式 CSS3 選取框效果？
06 Dec 2024
CSS3 中的選取框效果：避免文本適應(yīng)的特定值在 CSS3 動(dòng)畫中，通常需要?jiǎng)?chuàng)建選取框效果，其中文本...
為什么我的 CSS3 動(dòng)畫在 Safari 中不起作用？
14 Dec 2024
Safari 中 CSS3 動(dòng)畫失效您遇到了 CSS3 動(dòng)畫在 Safari 中無(wú)效的問題。盡管該動(dòng)畫在支持 CSS3...
如何創(chuàng)建具有自適應(yīng)文本長(zhǎng)度的動(dòng)態(tài) CSS 選取框？
07 Dec 2024
如何創(chuàng)建具有自適應(yīng)文本長(zhǎng)度的動(dòng)態(tài)選取框效果在 CSS3 中，實(shí)現(xiàn)選取框效果需要?jiǎng)赢嫞褂锰囟ǖ?..
如何在 CSS3 中實(shí)現(xiàn)淡出效果：關(guān)鍵幀動(dòng)畫與過渡？
27 Oct 2024
CSS3 過渡 - 淡出效果在 CSS3 中，可以通過使用關(guān)鍵幀動(dòng)畫來(lái)實(shí)現(xiàn)淡出效果。然而，這是...
為什么我使用 CSS3 @keyframes 的上滑動(dòng)畫不起作用？
28 Oct 2024
CSS3 過渡 - 淡出效果使用 CSS3，您可以輕松實(shí)現(xiàn)淡出效果以增強(qiáng)用戶體驗(yàn)。然而，如果你遇到...
熱門工具標(biāo)簽
熱工具
CSS文字組合成心形動(dòng)畫特效
CSS文字組合成心形動(dòng)畫特效
CSS3 SVG表白鮮花動(dòng)畫特效
SS3 SVG表白鮮花動(dòng)畫特效是一款情人節(jié)動(dòng)畫特效。
CSS的商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼
CSS的商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼
jQuery+CSS3情人節(jié)愛心特效
jQuery+CSS3情人節(jié)愛心特效是一款情人節(jié)懸掛擺動(dòng)愛心動(dòng)畫特效。
css3湯勺撈起湯圓動(dòng)畫特效
一碗可愛的湯圓表情，湯勺撈起一個(gè)湯圓動(dòng)畫特效