Implemented a simple web layout that contains five different boxes, each with a different background image and some spacing between them. When you hover over a box, its background image dims and the text turns white. The boxes and buttons are placed in a container and the entire page looks like a gallery.
<div class="container">
<div id="slide">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="buttons">
<div class="left">
< Prev</div>
<div class="center">Download wallpaper</div>
<div class="right">Next ></div>
</div>
</div>
</div> * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}
.item:nth-child(3) {
left: 70%;
}
.item:nth-child(4) {
left: calc(70% + 250px);
}
.item:nth-child(5) {
left: calc(70% + 500px);
}
.item:nth-child(n+6) {
left: calc(70% + 750px);
opacity: 0;
}
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition: .5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
} const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const slide = document.querySelector("#slide")
let openClick = true // Throttle processing (to ensure that the animation execution process, the button is not clicked repeatedly)
leftBtn.addEventListener("click", () => {
if (openClick) {
openClick = false // After triggering the click, disable the button const items = document.querySelectorAll(".item")
slide.prepend(items[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1s to open the button again}
})
rightBtn.addEventListener("click", () => {
if (openClick) {
openClick = false
const items = document.querySelectorAll(".item")
slide.appendChild(items[0])
setTimeout(() => openClick = true, 1000)
}
}) * {
margin: 0;
padding: 0;
box-sizing: border-box;
}This code sets the global CSS style, including setting the box model of the element to border-box, that is, the width and height of the box model include the border and padding of the element, rather than only the content of the element.
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}This code sets the CSS style of the container, including setting the width and height of the container to 100vw and 100vh, which are the width and height of the viewport. At the same time, set the positioning of the container to relative positioning, that is, positioning relative to its parent element. Finally, set the overflow property of the container to hidden, that is, elements that exceed the scope of the container will not be displayed.
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}This code sets the CSS style of the box, including setting the width and height of the box to 240px and 160px, which is the size of the box. At the same time, set the positioning of the box to absolute positioning, that is, positioning relative to its parent element. Finally, set the border radius of the box to 10px, which is the rounded corner of the box. The background image size of the box is cover, which covers the entire box. The background image is centered. Finally, set the transition effect of the box to 1 second, that is, the transition effect time is 1 second.
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}This code sets the CSS styles for the first and second boxes, including setting their positions to 0, which means they cover the top of the container. Also, set their height to 100%, which means they cover the entire height of the container. Finally, set their transform properties to translateY(0), which means they won't move down. Also, set their shadow and border radius to 0, i.e. they have no shadow and border.
.item:nth-child(3) {
left: 70%;
}This code sets the CSS style of the third box, including setting its position to 70% from the left side of the container.
.item:nth-child(4) {
left: calc(70% + 250px);
}This code sets the CSS style of the fourth box, including setting its position to 250px from the right side of the third box.
.item:nth-child(5) {
left: calc(70% + 500px);
}This code sets the CSS style of the fifth box, including setting its position to 500px from the right side of the third box.
.item:nth-child(n+6) {
left: calc(70% + 750px);
opacity: 0;
}This code sets the CSS styles for all the boxes, including setting their position to 750px from the right of the third box. Also, set their opacity to 0, i.e. they are invisible.
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}This code is to set the CSS style of the button, including setting the width of the button to 100%, that is, the size of the button is the same as the container. At the same time, set the button's position to 50px from the bottom of the container. Finally, set the button's alignment to center alignment, which means the button is centered horizontally.
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition:.5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}This code is to set the CSS style of the button, including setting the width of the button to 120px and the height to 50px, which is the size of the button. At the same time, set the row height of the button to 50px, which is the height of the button. The text alignment of the button is centered, that is, the text is centered horizontally. The button's border radius is 5px, which is the button's rounded corners. The margin of the button is 0 25px, that is, the distance between the left and right sides of the button in the horizontal direction is 25px. The transition effect of the button is 0.5 seconds, that is, the transition effect time is 0.5 seconds. The cursor attribute of the button is pointer, that is, when the mouse hovers over the button, the shape of the mouse will change into a hand shape. The user selection attribute of the button is none, that is, the user cannot select the text in the button. The button's font size is 20px, which is the button's text size. The button's text color is white, which is the button's text color. The background color of the button is rgba(0, 0, 0, 0.4), that is, the background color of the button is black and the transparency is 0.4. The button's shadow property is 2px 2px 2px rgba(0, 0, 0, 0.2), that is, the button's shadow is 2px 2px 2px black and the transparency is 0.2.
This concludes this article about the sample code of HTML+CSS panoramic carousel. For more related HTML CSS panoramic carousel content, please search previous articles on downcodes.com or continue to browse the following related articles. I hope you all Please support downcodes.com more in the future!