自己在网上找的图片，代码可行，供大家参考。

<!DOCTYPE HTML>

<htmllang="en-US">

<head>

<title>CSS3 Full Background Slider </title>

@importurl("http://www.w3cplus.com/demo/css3/base.css");

@importurl("http://fonts.googleapis.com/css?family=Yesteryear");

html,body {

height: 100%;

}

/*设置背景图片全屏显示，并且居中*/

img.bg {

min-height: 100%;

min-width: 1024px;

width: 100%;

height: auto !important;

height: 100%;

position: fixed;

top: 0;

left: 50%;

z-index:1;

-webkit-transform: translateX(-50%);

-moz-transform: translateX(-50%);

-o-transform: translateX(-50%);

-ms-transform: translateX(-50%);

}

/*设置背景图片从左向右移入显示的动画效果*/

/* Slide Left */

@-webkit-keyframes 'slideLeft' {

0% { left: -500px; }

100% { left: 0; }

}

@-moz-keyframes 'slideLeft' {

0% { left: -500px; }

100% { left: 0; }

}

@-o-keyframes 'slideLeft' {

0% { left: -500px; }

100% { left: 0; }

}

@-ms-keyframes 'slideLeft' {

0% { left: -500px; }

100% { left: 0; }

}

@keyframes 'slideLeft' {

0% { left: -500px; }

100% { left: 0; }

}

/*设置背景图像从底部向顶部移入的动画效果*/

/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {

0% { top: 350px; }

100% { top: 0; }

}

@-moz-keyframes 'slideBottom' {

0% { top: 350px; }

100% { top: 0; }

}

@-ms-keyframes 'slideBottom' {

0% { top: 350px; }

100% { top: 0; }

}

@-o-keyframes 'slideBottom' {

0% { top: 350px; }

100% { top: 0; }

}

@keyframes 'slideBottom' {

0% { top: 350px; }

100% { top: 0; }

}

/*设置背景图片由小到大放大动画效果*/

/* Zoom In */

@-webkit-keyframes 'zoomIn' {

0% { -webkit-transform: scale(0.1); }

100% { -webkit-transform: none; }

}

@-moz-keyframes 'zoomIn' {

0% { -moz-transform: scale(0.1); }

100% { -moz-transform: none; }

}

@-ms-keyframes 'zoomIn' {

0% { -ms-transform: scale(0.1); }

100% { -ms-transform: none; }

}

@-o-keyframes 'zoomIn' {

0% { -o-transform: scale(0.1); }

100% { -o-transform: none; }

}

@keyframes 'zoomIn' {

0% { transform: scale(0.1); }

100% { transform: none; }

}

/*设置背景图像由大到小缩小动画效果*/

/* Zoom Out */

@-webkit-keyframes 'zoomOut' {

0% { -webkit-transform: scale(2); }

100% { -webkit-transform: none; }

}

@-moz-keyframes 'zoomOut' {

0% { -moz-transform: scale(2); }

100% { -moz-transform: none; }

}

@-ms-keyframes 'zoomOut' {

0% { -ms-transform: scale(2); }

100% { -ms-transform: none; }

}

@-o-keyframes 'zoomOut' {

0% { -o-transform: scale(2); }

100% { -o-transform: none; }

}

@keyframes 'zoomOut' {

0% { transform: scale(2); }

100% { transform: none; }

}

/*背景图像旋转出现动画效果*/

/* Rotate */

@-webkit-keyframes 'rotate' {

0% { -webkit-transform: rotate(-360deg) scale(0.1); }

100% { -webkit-transform: none; }

}

@-moz-keyframes 'rotate' {

0% { -moz-transform: rotate(-360deg) scale(0.1); }

100% { -moz-transform: none; }

}

@-ms-keyframes 'rotate' {

0% { -ms-transform: rotate(-360deg) scale(0.1); }

100% { -ms-transform: none; }

}

@-o-keyframes 'rotate' {

0% { -o-transform: rotate(-360deg) scale(0.1); }

100% { -o-transform: none; }

}

@keyframes 'rotate' {

0% { transform: rotate(-360deg) scale(0.1); }

100% { transform: none; }

}

/*设置背景图像不显示动画效果*/

@-webkit-keyframes 'notTarget' {

0% { z-index: 75; }

100% { z-index: 75; }

}

@-moz-keyframes 'notTarget' {

0% { z-index: 75; }

100% { z-index: 75; }

}

@-ms-keyframes 'notTarget' {

0% { z-index: 75; }

100% { z-index: 75; }

}

@-o-keyframes 'notTarget' {

0% { z-index: 75; }

100% { z-index: 75; }

}

@keyframes 'notTarget' {

0% { z-index: 75; }

100% { z-index: 75; }

}

.slider {

position: absolute;

width: 100%;

text-align: center;

z-index: 9999;

bottom: 100px;

}

.slider li {

display: inline-block;

width: 170px;

height: 130px;

margin-right: 15px;

}

.slider a {

display: inline-block;

width: 170px;

padding-top: 70px;

padding-bottom: 20px;

position: relative;

cursor: pointer;

border: 2px solid #fff;

border-radius: 5px;

vertical-align: top;

color: #fff;

text-decoration: none;

font-size: 22px;

font-family: 'Yesteryear', cursive;

text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);

}

/*任务一、设置不同列表的背景色*/

.slider li:nth-of-type(1) a{

background-color: #02646e;

}

.slider li:nth-of-type(2) a{

background-color: #eb0837;

}

.slider li:nth-of-type(3) a{

background-color: #67b374;

}

.slider li:nth-of-type(4) a{

background-color: #e6674a;

}

.slider li:nth-of-type(5) a{

background-color: #e61061;

}

/*任务二、设置缩略图形状*/

.slider li a:after{

content:"";

display: block;

height: 120px;

width: 120px;

border: 5px solid #fff;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -60px;

z-index: 9999;

top: -80px;

}

/*任务三、设置缩略图背景图像*/

.slider li:nth-of-type(1) a:after{

background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg) no-repeat center;

}

.slider li:nth-of-type(2) a:after{

background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg) no-repeat center;

}

.slider li:nth-of-type(3) a:after{

background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg) no-repeat center;

}

.slider li:nth-of-type(4) a:after{

background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg) no-repeat center;

}

.slider li:nth-of-type(5) a:after{

background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg) no-repeat center;

}

/*任务四、给缩略图添加蒙板效果*/

.slider li a:before{

content:"";

display: block;

height: 120px;

width: 120px;

border: 5px solid #fff;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -60px;

z-index: 99999;

top: -80px;

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

}

/*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/

.slider li a:hover:before{

opacity:0;

}

/*任务六、点击综略图，切换背景图*/

/*背景图从左向右出现*/

#bg1:target{

z-index: 100;

-webkit-animation-name: slideLeft;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: slideLeft;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: slideLeft;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: slideLeft;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: slideLeft;

animation-duration: 1s;

animation-iteration-count: 1;

}

/*背景图从下向上出现*/

#bg2:target{

z-index: 100;

-webkit-animation-name: slideBottom;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: slideBottom;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: slideBottom;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: slideBottom;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: slideBottom;

animation-duration: 1s;

animation-iteration-count: 1;

}

/*背景图由小到大出现*/

#bg3:target{

z-index: 100;

-webkit-animation-name: zoomIn;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: zoomIn;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: zoomIn;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: zoomIn;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: zoomIn;

animation-duration: 1s;

animation-iteration-count: 1;

}

/*背景图由大到小出现*/

#bg4:target{

z-index: 100;

-webkit-animation-name: zoomOut;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: zoomOut;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: zoomOut;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: zoomOut;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: zoomOut;

animation-duration: 1s;

animation-iteration-count: 1;

}

/*背景图旋转出现*/

#bg5:target{

z-index: 100;

-webkit-animation-name: rotate;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: rotate;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: rotate;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: rotate;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: rotate;

animation-duration: 1s;

animation-iteration-count: 1;

}

/*任务七、设置不显示的背景图层级*/

/* Not Target */

img:not([:target]){

-webkit-animation-name: notTarget;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name: notTarget;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name: notTarget;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

-o-animation-name: notTarget;

-o-animation-duration: 1s;

-o-animation-iteration-count: 1;

animation-name: notTarget;

animation-duration: 1s;

animation-iteration-count: 1;

}

</style>

</head>

<body>

<li><a href="#bg1">Hipster Fashion Haircut </a></li>

<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>

<li><a href="#bg3">My haire is sooo fantastic!</a></li>

<li><a href="#bg4">Eat healthy & excersice!</a></li>

<li><a href="#bg5">Lips so kissable I could die ...</a></li>

</ul>

</div>

</body>

</html>

风起临冬

2018-08-09

源自：十天精通CSS3 7-8

关注问题我要回答

2827

操作

收起

10 回答

qq_Material_0 回答被采纳 +2 积分
2018-08-16

同学的代码点赞最高的那个还不如你这个，只能说你这个写的非常好了，要是背景大图切换起来顺畅那就更好了！不错哟！

0 回复有任何疑惑可以回复我~

收起回答

风起临冬提问者

非常感谢！

2018-08-17 回复有任何疑惑可以回复我~

weixin_慕容6229135
2021-01-24

为什么我照着写的zoomin 和zoomout效果好奇怪啊，rotate也不转?

0 回复有任何疑惑可以回复我~

收起回答

LuckyCH
2019-07-24

谢谢分享

0 回复有任何疑惑可以回复我~

收起回答

慕容818178
2019-03-24

要为你评论加点赞，让更多的人看到，太棒了

0 回复有任何疑惑可以回复我~

收起回答

风起临冬提问者

谢谢谢谢！好久了

2019-04-16 回复有任何疑惑可以回复我~

qq_Icantforgeti_0
2019-02-07

@importurl("http://www.w3cplus.com/demo/css3/base.css");

@importurl("http://fonts.googleapis.com/css?family=Yesteryear");

这两个网址是找不到的了吗

0 回复有任何疑惑可以回复我~

收起回答

风起临冬提问者

第一个服务器里找不到，第二个有，返回一个字体相关的css样式

2019-04-16 回复有任何疑惑可以回复我~

qq_慕盖茨8361330
2019-01-18

感谢了这个代码方便了许多

0 回复有任何疑惑可以回复我~

收起回答

vcfriend
2018-10-25

太棒了,感恩分享...图片显示效果非常好看...

0 回复有任何疑惑可以回复我~

收起回答

qq_嗜爱_mszAI9
2018-10-24

好厉害啊！！！

大佬

0 回复有任何疑惑可以回复我~

收起回答

四手科学家
2018-10-24

很好，谢谢了

0 回复有任何疑惑可以回复我~

收起回答

天空之城_rtzCKL
2018-10-18

/*任务六、点击综略图，切换背景图*/

选择那个ID标签是有问题的，点击除缩略图外的小方块也能切换大图，应该使用 .slideLeft:target ; .slideBottom:target .......

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

十天精通CSS3

参与学习 242554 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

1 回答参考代码冗余

4 回答嗯～～，这个提问大家都在考虑......

1 回答为啥我这用不了那些图片，都是空的，我重新自己去找了图片发现图片特别模糊，怎么办？

1 回答这个是不是对找的图片有要求？为什么我的图片不行，我用其他人的图片就可以

2 回答index.html的代码第六行，是使用了自己创作的字体吗？

搜索更多本课相关问答

自己在网上找的图片，代码可行，供大家参考。

我要回答关注问题

热搜

最近搜索清空

自己在网上找的图片，代码可行，供大家参考。

10 回答

本课相似问答

自己在网上找的图片，代码可行，供大家参考。