CSS3滿屏愛心指的是利用CSS3的animation動畫屬性制作出一個滿屏的愛心。下面是制作過程:
.heart { position: relative; width: 55px; height: 50px; transform: rotate(45deg); transform-origin: center top 0; } .heart:before, .heart:after { position: absolute; content: ""; width: 55px; height: 80px; background: red; border-radius: 50px 50px 0 0; } .heart:before { left: 0; top: -30px; } .heart:after { left: 30px; top: 0; } @keyframes heart { 0% { transform: scale(1); } 50% { transform: scale(0.6); } 100% { transform: scale(1); } }
上述代碼中,我們首先通過兩個偽元素before和after來實現一個紅色的愛心圖形。接著我們給圖形設置了一個旋轉角度,使它能夠成為一個傾斜的圖形。然后就是重點了:我們使用了animation動畫屬性,并為動畫設置了一個@keyframes關鍵幀,讓圖形在不同的過程中能夠有不同的表現形式,從而實現了滿屏愛心的效果。
接下來,我們只需要把這個heart類應用到body元素上,就可以實現一個滿屏的愛心了:
body { background: #f8e1e1; animation: heart 1s ease-in-out infinite; }
最終的效果就是,當你打開網頁時,整個屏幕都會閃爍著紅色的愛心,帶給你濃濃的愛的感覺。
上一篇mysql取消表的外鍵