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

首页课程实战体系课手记专栏慕课教程

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

来源：7-8 切换背景图像综合练习题

风起临冬

2018-08-09 11:51

<!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>

写回答关注

10回答

qq_Material_0

2018-08-16 20:45:46

已采纳

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

1 0

风起临冬

非常感谢！

2018-08-17 08:28:17

共 1 条回复 >
weixin_慕容6229135

2021-01-24 18:35:11

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

0 0
LuckyCH

2019-07-24 17:42:38

谢谢分享

0 0
慕容818178

2019-03-24 21:30:50

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

1 0

风起临冬

谢谢谢谢！好久了

2019-04-16 14:55:45

共 1 条回复 >
qq_Icantforgeti_0

2019-02-07 22:00:04

@importurl("http://www.w3cplus.com/demo/css3/base.css");
@importurl("http://fonts.googleapis.com/css?family=Yesteryear");
这两个网址是找不到的了吗

1 0

风起临冬

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

2019-04-16 14:55:14

共 1 条回复 >
qq_慕盖茨8361330

2019-01-18 15:49:31

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

0 0
vcfriend

2018-10-25 07:30:34

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

0 0
qq_嗜爱_mszAI9

2018-10-24 21:21:44

好厉害啊！！！
大佬

0 0
四手科学家

2018-10-24 15:15:37

很好，谢谢了

0 0
天空之城_rtzCKL

2018-10-18 10:26:43

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

0 0