Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS how to achieve the picture highlight arc effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

A highlight arc effect implemented by CSS3, when the mouse hover over an element, a light arc flashes from left to right

Light

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 (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)

Background:-webkit-gradient (linear,left top,right top,color-stop (0% background), color-stop (50%), color-stop (100%))

Background:-webkit-linear-gradient (left,rgba (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)

Background:-o-linear-gradient (left,rgba (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)

-webkit-transform: skewX (- 25deg)

-moz-transform: skewX (- 25deg)

}

Thank you for reading this article carefully. I hope the article "how to achieve the picture highlight arc effect" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.