|
1.实现了点击圆图片，切换对应的背景图片 2.主要技术：css3的背景设置，边框圆角，定位，盒模型，选择器，浮动，锚点，由:target实现切换 一、效果图如下  二、代码如下：
图片背景切换
/*样式初始化*/
* {
margin: 0;
padding: 0;
list-style: none;
}
/*去除横向滚动条*/
body {
overflow-x: hidden;
}
/*将div铺满整个窗口*/
.box {
height: 100vh;
min-height: 520px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*设置大ul的大小及定位*/
.content {
position: relative;
width: 100%;
height: 100%;
}
/*设置大li样式*/
.content li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-clip: border-box;
background-size: cover;
}
/*将第一张图片后的图片隐藏*/
#li1~li{display: none;}
/*设置大li背景图片*/
#li1 {background-image: url(img/bg1.jpg);}
#li2 {background-image: url(img/bg2.jpg);}
#li3 {background-image: url(img/bg3.jpg);}
#li4 {background-image: url(img/bg4.jpg);}
#li5 {background-image: url(img/bg5.jpg);}
/*点击a标签,切换大图片*/
#li1:target,
#li2:target,
#li3:target,
#li4:target,
#li5:target{
display: block;
}
/*定位*/
.conlist {
position: absolute;
bottom: 0;
}
/*设置li的样式*/
.conlist li {
position: relative;
float: left;
width: 180px;
height: 150px;
display: block;
border: 3px solid #fff;
border-radius: 10px;
margin-right: 10px;
text-align: center;
}
/*给li设置背景颜色*/
.conlist li:first-child {background: #00ff00;}
.conlist li:nth-child(2) {background: #00ff00;}
.conlist li:nth-child(3) {background: #66FF00;}
.conlist li:nth-child(4) {background: #990000;}
.conlist li:last-child {background: #FF6633;}
/*设置a标签的样式*/
.conlist a {
position: absolute;
display: block;
width: 145px;
height: 145px;
border: 3px solid #fff;
border-radius: 75px;
background-position: center;
background-clip: border-box;
background-size: cover;
left: 10%;
top: -50%;
}
/*设置a标签的背景图片*/
.a1 {background-image: url(img/sbg1.jpg);}
.a2 {background-image: url(img/sbg2.jpg);}
.a3 {background-image: url(img/sbg3.jpg);}
.a4 {background-image: url(img/sbg4.jpg);}
.a5 {background-image: url(img/sbg5.jpg);}
/*设置字体样式*/
.conlist span {
line-height: 220px;
font-family: "黑体";
font-size: 30px;
color: #fff;
font-weight: bold;
}
第一张
第二张
第三张
第四张
第五张
需要的同学图片自己更换；
|