純CSS自動特效是指不需要JavaScript的情況下,只使用CSS和HTML即可實現動態效果的特效。這種特效通常依賴于CSS的動畫效果或過渡效果。以下是幾個常見的純CSS自動特效:
/* 點擊圖片放大 */ img { transition: transform 0.3s; } img:hover { transform: scale(1.2); } /* 懸浮卡片翻轉 */ .card { perspective: 1000px; } .card__face { position: absolute; backface-visibility: hidden; transition: transform 0.6s; } .card__back { transform: rotateY(180deg); } .card:hover .card__face--front { transform: rotateY(180deg); } .card:hover .card__face--back { transform: rotateY(0); } /* 循環切換背景圖 */ .banner { background-image: url("image-1.jpg"); animation: cycle 8s infinite; } @keyframes cycle { 0% { background-image: url("image-1.jpg"); } 33.333% { background-image: url("image-2.jpg"); } 66.666% { background-image: url("image-3.jpg"); } 100% { background-image: url("image-1.jpg"); } }
以上特效展示了CSS動畫、過渡以及關鍵幀動畫的基本應用。通過CSS實現自動特效,可以減少網站的JavaScript代碼量,提高網站的性能和加載速度。
上一篇mysql 等值鏈接
下一篇css語言中背景的屬性