CSS實現廣告漂浮效果是網頁設計中比較常見的一種效果,可以吸引用戶的注意力,并提升廣告的點擊率。下面介紹一下如何使用CSS實現廣告漂浮效果。
代碼如下:
.floatAd { position: fixed; bottom: 20px; right: 20px; width: 250px; height: 250px; background-color: #fff; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); z-index: 9999; animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 10px); } 100% { transform: translate(0, 0); } }
上述代碼中,.floatAd是廣告容器的類名,設置了容器的位置、大小、背景色、陰影效果以及層級。animation屬性設置了廣告容器的動畫效果,其中float為動畫名稱,3s為動畫時長,ease-in-out為動畫速度曲線,infinite為循環播放動畫。
在@keyframes float中,分別設置了廣告容器的3個狀態:開始狀態,中間狀態和結束狀態。使用transform屬性設置容器位置的變化,translate函數中的參數分別為x軸和y軸的位移值。
這樣,在頁面上即可看到廣告容器漂浮的效果。