3D愛心跳動是一種非常流行的網頁設計效果,通過HTML、CSS和JavaScript的結合實現。下面是一段實現3D愛心跳動的HTML代碼,可以讓你在自己的網站或者博客中添加這個效果。
<div class="heart"> <div class="heart-inner"></div> </div> <style> .heart { position: relative; width: 110px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 45px; top: 0; width: 40px; height: 80px; background: #fc2e57; border-radius: 40px 40px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; border-radius: 0 0 40px 40px; } .heart-inner { position: absolute; top: 18px; left: 0; width: 110px; height: 90px; background: #fc2e57; border-radius: 60px 60px 0 0; transform: scale(0.8); animation: heartbeat 1s ease-in-out infinite; } @keyframes heartbeat { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } </style>
上面這段代碼中,首先我們定義了一個div元素,它擁有heart類名。然后我們為這個div元素添加了偽元素before和after,通過調整它們的樣式實現了愛心的形狀。接著,我們添加了一個heart-inner類名,定義了愛心內部的樣式。最后,我們使用CSS3的animation屬性實現了愛心的跳動效果。
使用上面這段3D愛心跳動的HTML代碼,你可以在網站或者博客中添加這個流行的設計效果,為你的網站或博客增加趣味和靈氣。同時,你也可以根據自己的需要對這段代碼進行修改和調整,實現你自己的創意和想法。
上一篇登錄 密碼驗證css