站長資訊網(wǎng)
之前的文章《手把手教你使用CSS制作逼真的水波紋效果（附代碼）》中，給大家介紹了怎么使用CSS制作逼真的水波紋效果。下面本篇文章給大家介紹如何用CSS3制作愛心加載，我們一起看看怎么做。
網(wǎng)頁中常常有這樣的CSS3愛心加載，給大家分享一下看效果圖看完效果，我們來研究一下是怎么實現(xiàn)呢，給大家用于講解html+css圖片文字排版的基本流程。
效果大概長這樣
1、首先html創(chuàng)建新文件，定義9個div標(biāo)簽。
<div class="header-0"></div> <div class="header-1"></div> <div class="header-2"></div> <div class="header-3"></div> <div class="header-4"></div> <div class="header-5"></div> <div class="header-6"></div> <div class="header-7"></div> <div class="header-8"></div>
2、開始定義css樣式來進(jìn)行修飾添加background-color屬性設(shè)置背景顏色，寬度設(shè)置為100%，高度設(shè)置為100%，margin屬性設(shè)置所有外邊距屬性。
body { width: 100%; height: 100%; margin: 0; background-color: #ccc; }
3、container標(biāo)題文本樣式，利用align-items屬性居中對齊。
.container { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;
4、header標(biāo)題文本樣式，利用position屬性指定一個元素定位。
.header { position: relative; width: 138px; /* display: flex; */
5、class*='header-'標(biāo)題文本樣式，利用position屬性定位元素，語法“position: absolute;top: -5px;border-radius: 5px”生成絕對定位的元素。
[class*='header-']{ position: absolute; width: 10px; height: 10px; top: -5px; border-radius: 5px; }
6、header0-8標(biāo)題文本樣式，利用animation（動畫）屬性綁定到每8個元素，讓元素擺動起來。
.header-0, .header-8 { animation: header-0 3.2s infinite; } .header-1, .header-7 { animation: header-1 3.2s infinite; } .header-2, .header-6 { animation: header-2 3.2s infinite; } .header-3, .header-5 { animation: header-3 3.2s infinite; } .header-4 { animation: header-4 3.2s infinite; }
7、使用4個@keyframes規(guī)則，給4個創(chuàng)建動畫逐步改變0％是開頭動畫，100％。
@keyframes header-0 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 30px; top: -10px; } } @keyframes header-1 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 60px; top: -31px; } } @keyframes header-2 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 80px; top: -37px; } } @keyframes header-3 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 90px; top: -31px; } } @keyframes header-4 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 94px; top: -23px; }
8、header0-8標(biāo)題文本樣式添加animation-delay屬性等待1秒然后開始動畫，background屬性設(shè)置顏色綁定8個元素。
.header-0 { left: 0; animation-delay: 0s; background: #92fe9d; } .header-1 { left: 16px; animation-delay: 0.15s; background: #00c9ff; } .header-2 { left: 32px; animation-delay: 0.3s; background: #ff758c; } .header-3 { left: 48px; animation-delay: 0.45s; background: #ff7eb3; } .header-4 { left: 66px; animation-delay: 0.6s; background: #fa71cd; } .header-5 { left: 82px; animation-delay: 0.75s; background: #6f86d6; } .header-6 { left: 98px; animation-delay: 0.9s; background: #f9f586; } .header-7 { left: 114px; animation-delay: 1.05s; background: #b1f4cf; } .header-8 { left: 130px; animation-delay: 1.2s; background: #fef9d7; }
代碼效果出來了
下面完整代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>愛心加載</title> <style> html,body { width: 100%; height: 100%; margin: 0; background-color: #ccc; } .container { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } .header { position: relative; width: 138px; /* display: flex; */ } [class*='header-']{ position: absolute; width: 10px; height: 10px; top: -5px; border-radius: 5px; } .header-0, .header-8 { animation: header-0 3.2s infinite; } .header-1, .header-7 { animation: header-1 3.2s infinite; } .header-2, .header-6 { animation: header-2 3.2s infinite; } .header-3, .header-5 { animation: header-3 3.2s infinite; } .header-4 { animation: header-4 3.2s infinite; } @keyframes header-0 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 30px; top: -10px; } } @keyframes header-1 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 60px; top: -31px; } } @keyframes header-2 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 80px; top: -37px; } } @keyframes header-3 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 90px; top: -31px; } } @keyframes header-4 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 94px; top: -23px; } } .header-0 { left: 0; animation-delay: 0s; background: #92fe9d; } .header-1 { left: 16px; animation-delay: 0.15s; background: #00c9ff; } .header-2 { left: 32px; animation-delay: 0.3s; background: #ff758c; } .header-3 { left: 48px; animation-delay: 0.45s; background: #ff7eb3; } .header-4 { left: 66px; animation-delay: 0.6s; background: #fa71cd; } .header-5 { left: 82px; animation-delay: 0.75s; background: #6f86d6; } .header-6 { left: 98px; animation-delay: 0.9s; background: #f9f586; } .header-7 { left: 114px; animation-delay: 1.05s; background: #b1f4cf; } .header-8 { left: 130px; animation-delay: 1.2s; background: #fef9d7; } </style> </head> <body> <div class="container"> <div class="header"> <div class="header-0"></div> <div class="header-1"></div> <div class="header-2"></div> <div class="header-3"></div> <div class="header-4"></div> <div class="header-5"></div> <div class="header-6"></div> <div class="header-7"></div> <div class="header-8"></div> </div> </div> </body> </html>
推薦學(xué)習(xí)：CSS視頻教程
