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

Question

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

我的问题是

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:jquery可以用在case里

Answer 1

很遗憾，CSS 无法做到这一点。此外，你不能用 JS 来做，因为它不是 trusted event.

Most untrusted events should not trigger default actions, with the exception of the click event.

Answer 2

您可以制作自定义关键帧动画，并在将其应用于图像时将持续时间设置为 10 秒。如果你想让它重复循环，请添加无限！

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

img {
    animation: glow 10s infinite;
}

http://jsfiddle.net/co9c8qoy/

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

how to simulate mouse hover on image in css

html

javascript

css

jquery

hover