CSS特效 - 賽博朋克故障霓虹燈 clip-path 實現
阿新 • • 發佈：2021-02-02
技術標籤：# webcss3csshtmlanimation
實現效果
實現原理
（0） 為故障霓虹燈盒子新增before和after，兩者content="賽博朋克 2077"重疊顯示
（1） 字型橙色與綠色的邊緣使用 box-shadow: 水平距離 垂直距離 陰影大小 顏色實現
（3） 滑鼠劃入觸發故障動畫
（4） 故障動畫原理是使用 CSS3 clip-path 屬性實現
clip-path 作用是指定顯示區域大小
clip-path: top left bottom right;
（5） 當前 gif 效果是 從上到下 顯示區域變化 並且 transfrom:translate(x軸偏移量，y軸偏移量)
實現程式碼
CSS
body { background: url(bg.jpg) no-repeat; } .banner { margin: 50px auto; width: 800px; height: 200px; border: 10px solid white; box-shadow: 0 0 20px red; } .banner:hover { box-shadow: 0 0 20px green; } .banner:hover::before { animation: trouble-effect 2s; } .banner::before, .banner::after { content: "賽博朋克 2077"; color: white; font: bold 5em "yahei"; position: absolute; text-align: center; display: block; width: 800px; line-height: 200px; text-shadow: -5px -5px orange, 3px 3px #00ffb3; } .banner::before { z-index: 999; } @keyframes trouble-effect { 00% { clip-path: inset(35% 0% 55% 0%); transform: translate(5px, 2px); } 10% { clip-path: inset(40% 0% 50% 0%); transform: translate(-5px, 2px); } 20% { clip-path: inset(45% 0% 45% 0%); transform: translate(5px, 2px); } 30% { clip-path: inset(50% 0% 40% 0%); transform: translate(5px, 2px); } 40% { clip-path: inset(55% 0% 35% 0%); transform: translate(-15px, 2px); } 50% { clip-path: inset(60% 0% 20% 0%); transform: translate(5px, 2px); } 60% { clip-path: inset(65% 0% 15% 0%); transform: translate(-5px, 2px); } 70% { clip-path: inset(70% 0% 20% 0%); transform: translate(15px, 2px); } 80% { clip-path: inset(75% 0% 15% 0%); transform: translate(-5px, 2px); } 90% { clip-path: inset(80% 0% 10% 0%); transform: translate(5px, 2px); } 100% { clip-path: inset(85% 0% 5% 0%); transform: translate(-15px, 2px); } }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href='index.css' rel='stylesheet' type='text/css' /> </head> <body> <div class="banner"> </div> </body> </html>