How to realize the effect of hiding and sliding in Web Box by HTML
This article mainly introduces HTML how to achieve web box hidden sliding effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this HTML how to achieve web box hidden sliding effect article will have a harvest, let's take a look at it.
Code:
Ul,li {list-style: none;margin: 0 * * padding: 0;}
Ul {
Width: 900pxposition height: 220px
Margin: 50px auto
}
Ul li {
Width: 200pxposition height: 200px
Border: 3px solid black
Float: left
Background: url (10 classroom materials / 01.jpg)
Background-size: 200px
Position: relative
Overflow: hidden
}
Li:nth-child (2) {
Background: url (10 classroom materials / 02.jpg)
Background-size: 200px
}
Li:nth-child (3) {
Background: url (10 classroom materials / 03.png)
Background-size: 250px
}
.li:nth-child (4) {
Background: url (10 classroom materials / 04.png)
Background-size: 200px
}
Ul li hgroup {
Width: 200pxposition height: 200px
Position: absolute
Top:220px
Left:0px
Background: rgba (255, 255, 255, 0.5)
Transition: all 2s
}
Ul li:hover hgroup {
Display: block
Position: absolute
Top:0px
Left: 0px
}
Waiting for you
Next
Waiting for you
Please enjoy
Waiting for you
Page effect
Waiting for you
Slide
This is the end of the article on "how to achieve the hidden sliding effect of web box in HTML". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how HTML realizes the hidden sliding effect of web box". If you want to learn more, you are welcome to follow the industry information channel.
