CSS作為前端開發中必不可少的樣式語言,除了可以為網頁添加樣式外,還可以實現各種特效。接下來,我們將介紹一些使用CSS實現特效的代碼。
/* 1. 垂直居中 */ div { position: relative; top: 50%; transform: translateY(-50%); } /* 2. 橫向滾動 */ div { overflow-x: scroll; white-space: nowrap; } /* 3. 漸變背景色 */ div { background: linear-gradient(to right, #00c6ff, #0072ff); } /* 4. 條紋背景 */ div { background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-color: #fff; background-size: 16px 16px; } /* 5. 文字輪廓 */ div { color: #fff; -webkit-text-stroke: 1px #000; } /* 6. 伸展出現 */ div { width: 0; height: 100%; background-color: #f00; animation: stretch 1s ease forwards; } @keyframes stretch { to { width: 100%; } } /* 7. 按鈕出現 */ button { opacity: 0; transform: translateY(30px); animation: appear 0.5s ease forwards; } @keyframes appear { to { opacity: 1; transform: translateY(0); } }
以上是CSS實現各種特效的代碼,開發者們可以在實際開發中根據需求進行合理的運用,為網頁添加更加豐富的交互體驗。
下一篇css實現環形圓