CSS JS 列表特效可以為網頁帶來更加生動、鮮明的視覺效果,提升用戶體驗。下面介紹幾種常見的列表特效實現方法:
/* 線性漸變背景色 */ li{ background: linear-gradient(to right, #ff0099, #493240); } /* 鼠標懸停閃爍動畫效果 */ li:hover{ animation: blink 1s infinite; } @keyframes blink { 0%{background-color: #ff0099;} 50%{background-color: #493240;} 100%{background-color: #ff0099;} } /* 滑動結算 */ li{ transition: all 0.4s ease-in-out; } li:hover{ transform: translateX(20px); } /* 立體翻轉 */ li { perspective: 1000px; } li:hover .content { transform: rotateY(180deg); text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3); } .content { transform-style: preserve-3d; transition: 0.4s; } /* 右側滑入 */ li{ animation: slideRight 0.5s ease; animation-fill-mode: forwards; } @keyframes slideRight{ 0%{transform: translateX(-150px);opacity: 0} 100%{transform: translateX(0px);opacity: 1} }
以上是一些列表特效實現的示例,你可以在你的網站中使用它們來增強用戶體驗。
上一篇css js 后面帶參數
下一篇css3媒體查詢標記