CSS3过渡点击事件

前端之家收集整理的这篇文章主要介绍了CSS3过渡点击事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > CSS3 Transitions: is there an on click option without using JQuery?4个
我想在div标签的css3过渡中实现一个click事件.我希望它像一个普通的按钮点击事件.我还是找不到办法做到这一点.请任何人帮我这个.

解决方法

根据CSS3过渡:
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

transition-property:指定应用转换的CSS属性名称.

transition-duration:定义转换所需的时间长度.默认值为0.

transition-timing-function:描述如何计算转换期间的速度.默认“轻松”.

transition-delay:定义转换何时开始.默认值为0.

剩下的所有其他财产:
transition:用于将四个过渡属性设置为单个属性的简写属性.

div
{
    transition: width 1s linear 2s;
}

或者如果你想使用普通的css伪类:

给出这个HTML:

<button>Click me!</button>

使用这些伪类:

button { }
button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }

:鼠标悬停在元素上方.

:active是单击元素(并保持)的时间.

:焦点是当您选中元素时.

希望能帮助到你!

猜你在找的CSS相关文章