Steps to implement CSS3 animation to create highlight light arc effect
Careful friends may notice that some pictures will have a high-brightness arc flashing with a very dazzling effect. This is not the default attribute of the picture, but an effect made using the animation attributes of CSS3. Here is the effect: Let me share an example for everyone to study.
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/> <title>CSS3动画实现高亮光弧效果</title> <style type="text/css"> body{margin:0;padding:0;} .box{width:1000px;margin:200px auto;height:500px;position:relative;text-align:center;} .box:hover .rolled{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; } .rolled{ position:absolute; top: 0; width:80px; height:500px; 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); -webkit-animation:rolled 2.5s .2s ease both infinite; -moz-animation:rolled 2.5s .2s ease both infinite; -o-animation:rolled 2.5s .2s ease both infinite; -ms-animation:rolled 2.5s .2s ease both infinite; overflow: hidden; } @-webkit-keyframes rolled{ 0%{left:-150px ;} 100%{left:920px;} } @-moz-keyframes rolled{ 0%{left:-150px ;} 100%{left:920px;} } @-o-keyframes rolled{ 0%{left:-150px ;} 100%{left:920px;} } @-ms-keyframes rolled{ 0%{left:-150px ;} 100%{left:920px;} } @keyframes rolled{ 0%{left:-150px ;} 100%{left:920px;} } </style> </head> <body> <div> <img src="/static/imghwm/default1.png" data-src="http://tangjiusheng.com/d/file/css3/2017-05-24/f2ff69d3c4e94e4a65c9f4ab203d4811.jpg" class="lazy" alt="Steps to implement CSS3 animation to create highlight light arc effect" > <div></div> </div> </body> </html>。
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Tutorial on using the word-break attribute in css3
Related implementation of the deformation attribute in Css3 Steps
#htmlSteps to achieve 3d suspension effect
The above is the detailed content of Steps to implement CSS3 animation to create highlight light arc effect. For more information, please follow other related articles on the PHP Chinese website!

Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a

This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in

We’re sliding into the roaring twenties of the twenty-first century (cue Jazz music ?). It’s important that you and I, as responsible people, follow

Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that

With stuff like template literals in JavaScript and templating languages, like JSX, I've gotten used to wanting to write my HTML templates in one nice chunk

Just yesterday, Ali Churcher shared a neat way to make a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver Mac version
Visual web development tools