CSS3转换点击事件 [英] CSS3 transition click event

问题描述

我可以在div标签的css3转换中实现点击事件。我想让它像一个正常的按钮点击事件。还是我找不到办法做到这一点。

解决方案

根据 CSS3 转换：

  div 
 {
 transition-property：width; 
 transition-duration：1s; 
 transition-timing-function：linear; 
 transition-delay：2s; 
} 
  

transition-property ：

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

transition-timing-function ：过渡将被计算。默认轻松。

transition-delay ： 。默认值为0。

另一个属性使用所有其他属性：
transition ：

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

或 -classes：

给定此html：

 < button&点击我！< / button> 
  

使用这些伪类：

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

：hover

：active 是元素被点击b
$ b

：focus 是当您跳到元素时。

帮助！

I wand to implement a click event in css3 transition for a div tag. I want it to be like a normal button click event. Still I couldn't find a way to do this. Please can any one help me on this.

解决方案

As per CSS3 transitions:

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

transition-property: Specifies the name of the CSS property to which the transition is applied.

transition-duration: Defines the length of time that a transition takes. Default 0.

transition-timing-function: Describes how the speed during a transition will be calculated. Default "ease".

transition-delay: Defines when the transition will start. Default 0.

One more property to use all the rest: transition: A shorthand property for setting the four transition properties into a single property.

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

Or if you want to use plain css pseudo-classes:

Given this html:

<button>Click me!</button>

Use these pseudo-classes:

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

:hover is when the mouse is over the element.

:active is when the element is clicked (and hold).

:focus is when you tab to the element.

Hope it helps!

这篇关于CSS3转换点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！