HTML是網站開發中必不可少的一部分，而在設計網站時，預加載特效可以增強用戶體驗。今天我將分享一個關于HTML心型預加載特效的代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML心型預加載特效</title>
<style>
body {
background-color: #FED5E0;
}
.heart-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
width: 80px;
height: 80px;
animation: rotate 2s infinite linear;
}
.heart-loading:before, .heart-loading:after {
position: absolute;
content: "";
left: 38px;
top: 0px;
width: 45px;
height: 70px;
background: #D53369;
border-radius: 30px 30px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
animation: beat 2s infinite ease-in-out;
}
.heart-loading:after {
transform: rotate(45deg);
transform-origin: 100% 100%;
left: 17px;
}
@keyframes beat {
0% {
transform: rotate(-45deg) scale(1);
}
50% {
transform: rotate(-45deg) scale(1.1);
}
100% {
transform: rotate(-45deg) scale(1);
}
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="heart-loading"></div>
</body>
</html>要實現這個心型預加載效果，需要使用CSS中的animation屬性來設置旋轉和跳動的動畫。此外，需要使用偽元素:before和:after來表示心形的兩個圓弧。在HTML中，使用<div>標簽來容納這個特效。
將這個代碼復制到您的HTML文件中，您就可以為您的網站添加一個令人驚嘆的心型預加載特效了！
上一篇python 按空格分開
下一篇Python 按季度相加