一個簡單的CSS3D心的實現,閃閃發亮,給你的網頁添加一些浪漫和藝術氣息。
.heart { width: 50px; height: 50px; transform-style: preserve-3d; animation: pulse 1.5s infinite both; } .heart:before, .heart:after { content: ""; position: absolute; } .heart:before { top: 0; left: 25px; width: 25px; height: 50px; background-color: #e74c3c; border-radius: 25px 25px 0 0; transform: rotateZ(45deg); } .heart:after { top: 0; left: 0; width: 25px; height: 50px; background-color: #e74c3c; border-radius: 25px 25px 0 0; transform: rotateZ(-45deg); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
以上代碼塊是一個簡單的CSS3D心的實現,使用偽元素:before和:after,通過旋轉和變形來創建兩個半心形狀,然后組合成一個完整的心形狀。
同時,使用CSS3動畫來讓心形狀閃爍發亮,為網頁增加美感和視覺效果。您可以自由地調整寬度、高度、顏色和動畫的參數,以適應不同的設計需求。該代碼可以用于按鈕、表單、圖標等網頁設計領域。