Shulou(Shulou.com)06/03 Report--

CSS3 in what the Transition is, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. A scalable search form

As anyone who is a regular fan of sf.gg knows, its top navigation bar looks like this:

When the input box gets focus, it looks like this:

Using the Transition property of CSS3, we can simply make a similar search form:

HTML tag:

XML/HTML

Search

CSS style:

CSS

* {

Margin: 0

Padding: 0

}

Header {

Font-family: helvetica,arial,sans-serif

Display: block

Overflow: hidden

Width:500px

Margin: 15px

Border-radius: 3px

Background-color: # ddd

}

Form.searchForm {

/ * Container containing label and input * /

Width: 200px

Margin: 5px

Padding: 5px

}

Form.searchForm input {

Width: 90px

Padding: 2px 0 3px 5px

Outline: none

Font-size: 1.2em

Border-color: # eee # ccc # ccc # eee

Border-radius: 10px

/ * manufacturer prefix of browsers for webkit kernel * /

-webkit-transition:0.5s width

}

Form.searchForm input:focus {

Width: 400px; / * if you lose focus, retract the original length * /

}

Form.searchForm label {

Display: none; / * tagging is necessary, but it does not need to be displayed * /

}

Effect picture:

Default:

Gain focus:

For those controls that can be entered, they are also commonly known as fields. Each form control (except the submit button) has a corresponding label text element that describes the data that the control represents. So, a search box is a form of a field.

2.CSS3 transition

Example:

CSS

-webkit-transition:0.5s width

Note: the transition attribute needs to be in the form of a manufacturer prefix-- in this example, only attributes with the Webkit (Chrome / Safari) prefix are used.

CSS3 transitions animate the CSS property. Styles that usually change abruptly when triggered by certain events, such as changing the color of the link when hovering over the mouse, and gradually change within a specified period of time after using the transition. The first CSS rule sets the initial state and transition parameters of the property. The second CSS rule sets the target state of the property when the event occurs.

Typically, transition animation is triggered by the user's mouse hover: hover pseudo-class rules and form elements gain focus: focus pseudo-class rules. In addition, you can set the new state in a rule with a class name selector, and then trigger the transition by adding the class name to the element through JavaScript (or other JS class libraries). The time to add the class name can be when a mouse click or other event occurs.

There are five transition attributes:

Transition-property, transitional CSS attribute names, such as color, width

Transition-duration, the duration of the transition, set in seconds or milliseconds, such as 2s, 500ms

Transition-timing-function, the speed regulation function of transition, determines whether the animation effect is smooth, slow first and then fast.

Fast then slow, such as ease-in, ease-out, ease-in-out, or linear (default)

Transition-delay, the delay time before the start of the transition, set in seconds or milliseconds, such as 1s, 200ms

Transition, the shorthand property of the transition, such as transition:color 2s ease-in 1ms;.

Note: many (but not all) CSS properties can be animated through the transition property.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.