CSS3酷炫應用是現代網頁設計中重要的一部分,可以讓網站變得更加動態、生動、吸引人。下面我們來介紹一些可以用CSS3實現的酷炫效果。
1. 圖片縮放效果: 代碼示例: img:hover { transform: scale(1.5); transition: transform .5s ease; } 2. 文字漸變效果: 代碼示例: h1 { background: linear-gradient(to bottom,#88c0d0, #223a4c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 3. 點擊按鈕呼吸燈效果: 代碼示例: button { box-shadow: 0 0 30px #fff; animation: breathe 2s ease-out infinite; } @keyframes breathe { 0% { box-shadow: 0 0 30px #fff, 0 0 50px #fff, 0 0 80px #fff; } 100% { box-shadow: 0 0 30px #fff, 0 0 50px #fff, 0 0 100px #fff; } } 4. 網頁背景氣泡效果: 代碼示例: body { background: #1c1f23 url('https://res.cloudinary.com/dcsimage/image/upload/v1525568835/bubble-1_krdsof.png') repeat; } 5. 懸停下滑出現文字效果: 代碼示例: h2::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: rgba(0, 0, 0, 0.4); transform: skewX(-15deg); transform-origin: right; transition: transform .4s ease-in-out; } h2:hover::before { transform: skewX(-30deg); }
CSS3提供了強大的設計技巧,上面列舉的示例僅僅是其中一部分,你可以根據自己的設計需求自行探索。但是請注意,使用過多復雜效果會影響網站加載速度,因此需謹慎使用。
上一篇mysql查表的列頭語句
下一篇css3遮罩放大