利用css3新增选择器制作背景切换

2021-10-02 22:07:51

之前写css3的时间都是捡项目需要的来用，没有系统的学习过，这几天好好的补了一下css3的知识，真的获益匪浅！觉得新增的那些选择器是有用至极的！今天就来所这几天的所学做一个点击标签切换背景的效果，是纯css制作哦，不依赖js，算是作一个总结吧！

　　首先呢，前期工作当做是要先建好目录那些的了。

index.html、css文件夹（包含style.css）、img文件夹(包含1.jpg,2.jpg,3.jpg,4.jpg)

最后完成的效果如下（因为本人喜欢篮球，所以搞了几张nba人物卡通作素材），具体实现，请看后面的代码！

index.html，结构比较简单，不多做解释

css:重点讲解一下

body,ul{margin: 0;padding: 0;list-style: none}

.box{position: relative;width: 400px;height: 400px;padding: 10px;margin: 10px auto;border: 1px solid #f0f0f0;box-shadow: 0 0 3px rgba(0,0,0,0.5);overflow: hidden}
.box img{position: absolute;top: 10px;left: 10px;width: 400px;height: 400px}

.box li{display: inline;position: relative;float: left;width: 90px;height: 90px;color: #fff;text-align: center;text-shadow: 0 0 3px rgba(0,0,0,0.9);margin: 280px 4px 0 4px;border: 1px solid #888;cursor: pointer;z-index: 10}
.box li a{display: block;width: 90px;height: 40px;padding: 50px 0 0;color: #fff;text-decoration: none}
.box li:nth-of-type(1){background: #552F86}
.box li:nth-of-type(2){background: #9C0701}
.box li:nth-of-type(3){background: #FFCA34}
.box li:nth-of-type(4){background: #D2C1A6}
.box li a::after{content: '';position: absolute;top: -20px;left: 25px;width: 40px;height: 40px;border-radius: 40px;border: 2px solid #999}
.box li:nth-of-type(1) a::after{background: url(../img/1.jpg) center;background-size: cover}
.box li:nth-of-type(2) a::after{background: url(../img/2.jpg) center;background-size: cover}
.box li:nth-of-type(3) a::after{background: url(../img/3.jpg) center;background-size: cover}
.box li:nth-of-type(4) a::after{background: url(../img/4.jpg) center;background-size: cover}
.box li a::before{content: '';position: absolute;top: -18px;left: 27px;width: 40px;height: 40px;border-radius: 40px;background:rgba(255,255,255,0.3);z-index: 20}
.box li a:hover::before{opacity: 0}

#player1:target{z-index: 10}
#player2:target{z-index: 10}
#player3:target{z-index: 10}
#player4:target{z-index: 10}

img:not(:target){z-index: 5}

看html代码那么简洁，要怎么实现如图所示的看似复杂的效果呢？

1、给每一个人物的小框定义不同的背景色和头像，用到的是结构伪类选择器：nth-of-type() ,头像使用伪元素::after

.box li:nth-of-type(1){background: #552F86}
.box li:nth-of-type(2){background: #9C0701}
.box li:nth-of-type(3){background: #FFCA34}
.box li:nth-of-type(4){background: #D2C1A6}

利用nth-of-type() 为每一个小框定义了不同的颜色。

.box li a::after{content: '';position: absolute;top: -20px;left: 25px;width: 40px;height: 40px;border-radius: 40px;border: 2px solid #999}
.box li:nth-of-type(1) a::after{background: url(../img/1.jpg) center;background-size: cover}
.box li:nth-of-type(2) a::after{background: url(../img/2.jpg) center;background-size: cover}
.box li:nth-of-type(3) a::after{background: url(../img/3.jpg) center;background-size: cover}
.box li:nth-of-type(4) a::after{background: url(../img/4.jpg) center;background-size: cover}

使用了nth-of-type和伪元素after实现了为每一个缩略图设置不同的图片，并且background-size: cover，实现了图片的缩略，使小圆圈里填充满了整张图的效果！

.box li a::before{content: '';position: absolute;top: -18px;left: 27px;width: 40px;height: 40px;border-radius: 40px;background:rgba(255,255,255,0.3);z-index: 20}
.box li a:hover::before{opacity: 0}

以上这段代码呢，是为元素加了蒙板效果，让鼠标移入元素时有点不一样，增强视觉效果！！！

可能人有会觉得奇怪，li里为什么一定要放一个a标签呢？

这就是今天主题的关键所在了！因为我们需要用到最重要的:target，这玩意儿官方是这么解释的：

:target 定义和用法

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

例子中,URL 带有后面跟有锚名称 #就是 li里的a标签，目标元素就是对应的img

#player1:target{z-index: 10}
#player2:target{z-index: 10}
#player3:target{z-index: 10}
#player4:target{z-index: 10}

就是当点击某个a的时候对应该的img元素就显示在前面，

img:not(:target){z-index: 5}

:not()选择器，是为了去掉某些元素，意思就是不是某类元素的元素生效，:not(:target)即：把不是目标元素的图片显示的下面z-index小于目标元素!

通过如上，便实现了背景切换效果，这可是纯css制作的效果，并没有使用js！

码农公寓

:target 定义和用法

相关文章