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

In this article Xiaobian for you to introduce in detail "how to use pure css3 to achieve black cool switch button animation effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to use pure css3 to achieve black cool switch button animation effect" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

This css3 switch button effect simulates the switch button in real life. The whole code is done in pure css3, with the animation effect when the switch is pressed.

HTML

The html structure is very simple, using an input as the main body of the switch.

Basic CSS style

.button {

Display: block

Width: 400px

Height: 120px

Position: absolute

Top: 50%

Left: 50%

-webkit-transform: translate (- 50%,-50%)

-ms-transform: translate (- 50%,-50%)

Transform: translate (- 50%,-50%)

Background-color: # 000000

Box-shadow: 0-1px 0 rgba (255,255,255,0.2) inset

Border-radius: 20px

Overflow: hidden

Cursor: pointer

-webkit-tap-highlight-color: rgba (0,0,0,0)

}

.button span {

Display: block

Position: absolute

Top: 6px

Width: 194px

Height: 108px

Background-color: # 1c1d1f

-webkit-transition:-webkit-transform 300ms ease, box-shadow 300ms ease

Transition: transform 300ms ease, box-shadow 300ms ease

}

.button span:before {

Position: absolute

Top: 50%

Left: 50%

-webkit-transform: translate (- 50%,-50%)

-ms-transform: translate (- 50%,-50%)

Transform: translate (- 50%,-50%)

Font-family: "Open Sans"

Font-weight: 800

Font-size: 48px

-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms

Transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms

}

.button span:after {

Content: ""

Width: 4px

Height: 108px

Position: absolute

Top: 0

Background:-webkit-radial-gradient (center, ellipse, rgba (255,255,255,0.5) 0%, transparent 50%)

Background: radial-gradient (ellipse at center, rgba (255,255,255,0.5) 0%, transparent 50%)

-webkit-transition: opacity 300ms ease

Transition: opacity 300ms ease

}

Read here, this "how to use pure css3 to achieve black cool switch button animation effect" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

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.