html实现网页图片切换,前端开发 纯CSS实现网页轮播图切换！

/p>

<

margin: 0px;

padding: 0px;

}

.carousel {

position: relative;

box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);

margin-top: 26px;

}

.carousel-inner {

position: relative;

overflow: hidden;

width: 100%;

}

.carousel-open:checked+.carousel-item {

position: static;

opacity: 100;

}

.carousel-item {

position: absolute;

opacity: 0;

-webkit-transition: opacity 0.6s ease-out;

transition: opacity 0.6s ease-out;

}

.carousel-item img {

display: block;

height: auto;

max-width: 100%;

}

.carousel-control {

background: rgba(0, 0, 0, 0.28);

border-radius: 50%;

color: #fff;

cursor: pointer;

display: none;

font-size: 40px;

height: 40px;

line-height: 35px;

position: absolute;

top: 50%;

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

cursor: pointer;

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

transform: translate(0, -50%);

text-align: center;

width: 40px;

z-index: 10;

}

.carousel-control.prev {

left: 2%;

}

.carousel-control.next {

right: 2%;

}

.carousel-control:hover {

background: rgba(0, 0, 0, 0.8);

color: #aaaaaa;

}

#carousel-1:checked~.control-1,

#carousel-2:checked~.control-2,

#carousel-3:checked~.control-3 {

display: block;

}

.carousel-indicators {

list-style: none;

margin: 0;

padding: 0;

position: absolute;

bottom: 2%;

left: 0;

right: 0;

text-align: center;

z-index: 10;

}

.carousel-indicators li {

display: inline-block;

margin: 0 5px;

}

.carousel-bullet {

color: #fff;

cursor: pointer;

display: block;

font-size: 35px;

}

.carousel-bullet:hover {

color: #aaaaaa;

}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,

#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,

#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {

color: #428bca;

}

#title {

width: 100%;

position: absolute;

padding: 0px;

margin: 0px auto;

text-align: center;

font-size: 27px;

color: rgba(255, 255, 255, 1);

font-family: ‘Open Sans’, sans-serif;

z-index: 9999;

text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);

}

.carousel-item .imgs {

display: block;

width: 100%;

height: 80vh;

}

.imgs1 {

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

}

.imgs2 {

background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));

background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

}

.imgs3 {

background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));

background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);

}

‹

›

‹

›

‹

›

1. •

2. •

3. •