gpt4 book ai didi

javascript - 如何在css中模拟鼠标悬停在图像上

转载 作者:太空宇宙 更新时间:2023-11-03 21:26:10 26 4
gpt4 key购买 nike

我在图像的悬停上写了发光效果。这真的很好用。

我的问题是

how to just make itself glitter every 10 seconds without mouse being hovered.

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>

我觉得我不必模拟鼠标悬停来完成任务。有什么建议吗?

JSFiddle

谢谢,缺乏。

ps:case可以用jquery

最佳答案

您可以制作自定义关键帧动画,并在将其应用于图像时将持续时间设置为 10 秒。如果您希望它重复循环,请添加 infinite!

@keyframe glow {
0%{}
100%{}
}

img {
animation: glow 10s infinite;
}

http://jsfiddle.net/co9c8qoy/

关于javascript - 如何在css中模拟鼠标悬停在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32574987/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com