我在图像的悬停上有发光效果。这真的很好。
我的问题是
如何使自己每10秒闪烁一次而无需将鼠标悬停。
CSS类是这样的：
.demo
{
margin: 30px auto;
background-color: #FFFFFF;
border-radius: 5px;
padding: 5px;
position: relative;
overflow: hidden;
-webkit-transition: all 1000ms cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
-webkit-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-moz-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-ms-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-o-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition: all 2000ms cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
-webkit-transition-timing-function: cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-moz-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-ms-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-o-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
}
.show-off
{
width: 500px;
height: 500px;
position: absolute;
top: -180px;
left: -600px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
}
.demo:hover .show-off
{
top: 0px;
left: 0px;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.demo:hover
{
box-shadow: 0px 0px 20px 5px #FFFFFF;
-webkit-box-shadow: 0px 0px 20px 5px #FFFFFF;
-moz-box-shadow: 0px 0px 20px 5px #FFFFFF;
-o-box-shadow: 0px 0px 20px 5px #FFFFFF;
}
和html代码是
<div id="logo" class="demo">
<img src="http://blog.spoongraphics.co.uk/wp-content/uploads/2011/colourful-logo/18.jpg" />
<div class="show-off" />
</div>
我觉得我不必模拟鼠标悬停即可完成任务。有什么建议？
谢谢，老兄。
ps：可以使用jquery以防万一。
您可以制作自定义关键帧动画，并将其应用于图像时只需将持续时间设置为10秒。如果您想让它反复循环，请添加无限！
@keyframe glow {
0%{}
100%{}
}
img {
animation: glow 10s infinite;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句