CSS3紅色愛心跳動(dòng)動(dòng)畫代碼
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ffa5a5;
/*
定義body 漸變，向頁面。
*/
/*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)載。請自行檢查軟件的完整性！本站所有資源僅供學(xué)習(xí)參考。請不要將它們用于商業(yè)目的。否則，一切后果由您負(fù)責(zé)！如有侵權(quán)，請聯(lián)系我們刪除。聯(lián)系方式：admin@php.cn
相關(guān)文章
愛心符號 c 愛心跳動(dòng)代碼分享
04 Apr 2025
用C 代碼繪制跳動(dòng)愛心，通過循環(huán)不斷改變心形大小和位置，配合ClearDevice()清除屏幕，就能讓愛心模擬出跳動(dòng)效果。采用EasyX圖形庫，利用正弦函數(shù)控制變化以模擬跳動(dòng)，但需要減少ClearDevice()調(diào)用次數(shù)并合理設(shè)置延時(shí)參數(shù)。該代碼可作為基礎(chǔ)，通過定制顏色、特效和旋轉(zhuǎn)等進(jìn)一步完善。同時(shí)強(qiáng)調(diào)代碼可讀性、可維護(hù)性和編程的樂趣。
CSS3 `transition: all` 是否比針對特定屬性的效率低？
07 Dec 2024
CSS3 過渡：“transition: all”比針對特定屬性的效率低嗎？使用 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 中無效的問題。盡管該動(dòng)畫在支持 CSS3...
如何創(chuàng)建具有自適應(yīng)文本長度的動(dòng)態(tài) CSS 選取框？
07 Dec 2024
如何創(chuàng)建具有自適應(yīng)文本長度的動(dòng)態(tài)選取框效果在 CSS3 中，實(shí)現(xiàn)選取框效果需要?jiǎng)赢?，但使用特定?..
深入了解Bootstrap中的進(jìn)度條組件
23 Feb 2021
在網(wǎng)頁中，進(jìn)度條的效果并不少見，如：平分系統(tǒng)、加載狀態(tài)等，進(jìn)度條組件使用了css3的transition和animation屬性來完成一些特效，這些特效在IE9及IE9以下版本、Firefox的老版本
純HTML5 CSS3制作圖片旋轉(zhuǎn)
05 Jun 2018
這篇文章主要介紹了純HTML5 CSS3制作圖片旋轉(zhuǎn)，HTML5結(jié)合CSS3 實(shí)現(xiàn)的一些動(dòng)畫特效，實(shí)現(xiàn)起來比較容易，感興趣的小伙伴們可以參考一下
如何在 CSS3 中實(shí)現(xiàn)淡出效果：關(guān)鍵幀動(dòng)畫與過渡？
27 Oct 2024
CSS3 過渡 - 淡出效果在 CSS3 中，可以通過使用關(guān)鍵幀動(dòng)畫來實(shí)現(xià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)畫特效