In the discount icon to achieve a white light across the animation effect
Css:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<style>
p{
width:15%;
margin:0 Auto;
line-height:50px;
font-size:30px;
Text-align:center;
transform-origin:50px 50px;
Transform:rotate (45deg) skew ( -45deg);
/*-webkit-background-clip:text;*//* Cut by text */
/*-webkit-text-fill-color:transparent; */* The color of the text uses the background color */
Background-color: #C89845; /* Set a background color */
Background-image:-webkit-linear-gradient ( -4deg, Rgba (200,152,69,.6) 30%, #fff 50%, Rgba (200,152,69, 0.6) 70%);/* Set the background of the gradient, gradient by diagonal */
Background-blend-mode:hard-light; /* Set the background to strong light mode in mixed mode */
background-size:200%;
-webkit-animation:shine 2.5s Infinite; /* Animate the background to change location */
}
@-webkit-keyframes Shine {
from {background-position:130%;}
to {background-position:-30%;}
}
</style>
<body><p>7 Folding </p></body>
In addition, we also found a light flash effect in the picture:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
Html,body{background-color: #333;}
. img {display:block; position:relative; width:800px; height:286px; margin:0 Auto;overflow:hidden;}
. img:before {
Content: ""; Position:absolute; width:200px; height:100%; top:0; Left: -150px; Overflow:hidden;
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));/* Old grammar writing rules */
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-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)
}
. img:hover:before {left:150%; transition:left 1s ease 0s;}
</style>
<body>
<a href= "#" Class= "img" ></a>
</body>
Effect:
CSS3 realizes a beam of light across pictures, and text effects