Heim > Artikel > Web-Frontend > CSS erzielt einen Lichtbogeneffekt mit hoher Helligkeit
Ein mit CSS3 implementierter Hervorhebungsbogeneffekt. Wenn die Maus über ein Element fährt, blinkt ein Lichtbogen von links nach rechts. Der Effekt ist wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display: block; height: 475px; } a.floor:hover:before{ -webkit-transition: left 1.5s; -moz-transition: left 1.5s; transition: left 1.5s; left: 920px; } a.floor:before{ content: ""; position: absolute; width: 80px; height: 475px; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); } </style> </head> <body> <a href="javascript:;"> <img src="./images/girl.jpg" style="max-width:90%" width="760" alt=""> </a> </body> </html>