1. 首页
  2. 问题列表
  3. 指定HTML元素应用动画的正确方法[重复]
提问者：小点点

指定HTML元素应用动画的正确方法[重复]


在我的html页面中有三个div及其相应的span子级

<ul>
   <li><div><span class="spinner">A</span></div></li>
   <li><div><span>B</span></div></li>
   <li><div><span>C</span></div></li>
</ul>

当我悬停在div上时，我只希望有子代的用户能够实际旋转，但是如果没有以下行，我无法完成这样的任务:

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
}

您可以在JSFiddle中看到我的代码


共1个答案

匿名用户

您的需要有

下面是具有display属性的代码

null

ul{
    list-style-type: none;
}

li {
    display: inline-block;
}

ul li div{
    width: 100px;
    height: 100px;
    background-color: red;
}

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin{
    from{ 
        transform: rotate(0deg); 
    }
    to{ 
        transform: rotate(360deg); 
    }
}
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title> Main Page </title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <ul>
            <li><div><span class="spinner">A</span></div></li>
            <li><div><span>B</span></div></li>
            <li><div><span>C</span></div></li>
        </ul>
    </body>
</html>

相关问题