How to implement list toggle effects based on css3
This article mainly explains "how to achieve css3-based list toggle effects", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to achieve css3-based list toggle effects"!
The code for the implementation.
Htm Code:
Copy the contents to the clipboard
Toggle visibility
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Css3 Code:
CSS Code copies content to the clipboard
* {
-moz-box-sizing: border-box
Box-sizing: border-box
}
Body {
Margin: 0
Padding: 0
Font-family: 'Avenir Next'
Background: # 000
Color: white
}
.menu {
Background: tomato
Padding: 20px
Position: absolute
Z-index: 1
Height: 55px
Top: 0
Rightright: 50px
}
.list {
-webkit-perspective: 100vw
Perspective: 100vw
Width: 100vw
Height: 100vh
Display:-webkit-flex
Display:-ms-flexbox
Display: flex
-webkit-flex-flow: column wrap
-ms-flex-flow: column wrap
Flex-flow: column wrap
}
.list.hidden {
Pointer-events: none
}
.list.hidden .item {
-webkit-animation: disappear both
Animation: disappear both
-webkit-animation-direction: alternate
Animation-direction: alternate
}
.list.reverse {
-webkit-flex-flow: row-reverse wrap-reverse
-ms-flex-flow: row-reverse wrap-reverse
Flex-flow: row-reverse wrap-reverse
}
.item {
Font-size: 30px
Padding: 20px
Height: 100px
Width: calc (100vw / 3)
Height: calc (100vh / 4)
-webkit-animation: appear both
Animation: appear both
}
.item:nth-child (1) {
Background: # 008a8a
-webkit-animation-delay: 0.03333s! important
-webkit-animation-duration: 0.1s! important
}
.item:nth-child (2) {
Background: # 009494
-webkit-animation-delay: 0.06667s! important
-webkit-animation-duration: 0.2s! important
}
.item:nth-child (3) {
Background: # 009f9f
-webkit-animation-delay: 0.1s! important
-webkit-animation-duration: 0.3s! important
}
.item:nth-child (4) {
Background: # 00a9a9
-webkit-animation-delay: 0.13333s! important
-webkit-animation-duration: 0.4s! important
}
.item:nth-child (5) {
Background: # 00b3b3
-webkit-animation-delay: 0.16667s! important
-webkit-animation-duration: 0.5s! important
}
.item:nth-child (6) {
Background: # 00bdbd
-webkit-animation-delay: 0.2s! important
-webkit-animation-duration: 0.6s! important
}
.item:nth-child (7) {
Background: # 00c7c7
-webkit-animation-delay: 0.23333s! important
-webkit-animation-duration: 0.7s! important
}
.item:nth-child (8) {
Background: # 00d2d2
-webkit-animation-delay: 0.26667s! important
-webkit-animation-duration: 0.8s! important
}
.item:nth-child (9) {
Background: # 00dcdc
-webkit-animation-delay: 0.3s! important
-webkit-animation-duration: 0.9s! important
}
.item:nth-child (10) {
Background: # 00e6e6
-webkit-animation-delay: 0.33333s! important
-webkit-animation-duration: 1s! important
}
.item:nth-child (11) {
Background: # 00f0f0
-webkit-animation-delay: 0.36667s! important
-webkit-animation-duration: 1.1s! important
}
.item:nth-child (12) {
Background: # 00fafa
-webkit-animation-delay: 0.4s! important
-webkit-animation-duration: 1.2s! important
}
@-webkit-keyframes appear {
From {
Opacity: 0
-webkit-transform: scale (0.8)
Transform: scale (0.8)
}
To {
Opacity: 1
-webkit-transform: scale (1)
Transform: scale (1)
}
}
@ keyframes appear {
From {
Opacity: 0
-webkit-transform: scale (0.8)
Transform: scale (0.8)
}
To {
Opacity: 1
-webkit-transform: scale (1)
Transform: scale (1)
}
}
@-webkit-keyframes disappear {
From {
Opacity: 1
-webkit-transform: scale (1)
Transform: scale (1)
}
To {
Opacity: 0
-webkit-transform: scale (0.9) rotateX (0deg) translateZ (- 1500px)
Transform: scale (0.9) rotateX (0deg) translateZ (- 1500px)
}
}
@ keyframes disappear {
From {
Opacity: 1
-webkit-transform: scale (1)
Transform: scale (1)
}
To {
Opacity: 0
-webkit-transform: scale (0.9) rotateX (0deg) translateZ (- 1500px)
Transform: scale (0.9) rotateX (0deg) translateZ (- 1500px)
}
}
Thank you for your reading, the above is the content of "how to achieve css3-based list toggle effects". After the study of this article, I believe you have a deeper understanding of how to achieve css3-based list toggle effects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
