Question

编辑演示在这里：http://3.cnxical.appspot.com

悬停时text-shadow属性发生变化，animation-fill-mode设置forwards状态仍然存在。

：活动状态的动画不起作用，单击标题时没有任何反应。

预期的行为是标题应该消失，因为text-shadow属性设置为（并尝试了这两个属性）none或0 0 1px transparent。设置text-shadow for：active也是在没有动画的情况下尝试过的，但它没有用。

如何才能实现正确的行为？

代码是：

            #title {
                position:absolute;
                cursor:pointer;
                text-align:center;
                top:15%;
                left:50%;
                -webkit-transform:translate(-50%,-50%);
                color:transparent;
                text-shadow:0 0 10px lime;
                font-size:5vmin;
                font-weight:bold;
                font-family:"Courier New",Courier,monospace;
                -webkit-animation: push_title_focus 0.3s;
            }
            #title:active {
                -webkit-user-select:none;
                -webkit-animation: vanish_title 0.3s;   
            }
            #title:hover {
                -webkit-animation: pull_title_focus 0.3s;
                -webkit-animation-fill-mode: forwards;
            }
            @-webkit-keyframes pull_title_focus {
                from { text-shadow: 0 0 10px lime; }
                to { text-shadow: 0 0 1px lime; }
            }
            @-webkit-keyframes push_title_focus {
                from { text-shadow: 0 0 1px lime; }
                to { text-shadow: 0 0 10px lime; }
            }
            @-webkit-keyframes vanish_title {
                from { text-shadow: 0 0 1px lime; }
                to { text-shadow: none !important; }
            }

Answer 1

当您按下鼠标按钮激活链接时，鼠标仍然指向它，因此它仍在盘旋。

#title:hover和#title:active具体相同，最后定义了悬停规则。

任何具有在两个规则集中指定的属性的规则都将被:hover规则（包括-webkit-animation）覆盖。

重新排序规则集，以便{/ 1}}规则在 :hover规则之前显示。

具有不同效果的CSS动画：悬停和：活动？

1 个答案: