<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3图片全屏显示 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="base.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<style type="text/css">
html,body {
height: 100%;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto !important;
height: 100%;
/* Set up positioning */
position: fixed;
top: 40px;
left: 0;
z-index:1;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
.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 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(sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after {
background: url(sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after {
background: url(sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after {
background: url(sbg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after {
background: url(sbg5.jpg) no-repeat center;
}
.slider 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 a:hover::before {
opacity:0;
}
/* 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; }
}
.slideLeft: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;
}
/* 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; }
}
.slideBottom: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;
}
/* 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; }
}
.zoomIn: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;
}
/* 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; }
}
.zoomOut: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;
}
/* 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; }
}
.rotate: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 */
@-webkit-keyframes 'notTarget' {
0% { z-index: 75; }
100% { z-index: 75; }
}
@-moz-keyframes 'not
CSS3图片全屏显示 CSS3图片全屏显示代码下载.zip
版权申诉
146 浏览量
2022-11-17
21:19:34
上传
评论
收藏 2.56MB ZIP 举报
CSS3图片全屏显示 CSS3图片全屏显示代码下载.zip （12个子文件） 
CSS3图片全屏显示 CSS3图片全屏显示代码下载 jiaoben890 
sbg2.jpg 26KB sbg3.jpg 12KB bg5.jpg 364KB bg3.jpg 552KB bg4.jpg 218KB
index.html 10KB sbg5.jpg 10KB sbg4.jpg 12KB sbg1.jpg 11KB
base.css 1KB bg2.jpg 1.17MB bg1.jpg 221KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 5G网络基础培训课件.zip
- 2024-spring-HIT-CS-大作业
- yolo目标检测项目实验
- downloadFile-1.hc
- C++课程设计：基于Qt的航班信息管理系统
- ADS7822UVerilog驱动，前面传的有点问题
- 基于python的高性能爬虫程序，使用了多线程+缓存+xpath实现的，这里以彼-岸图库为例，实现，仅用于学习交流
- 中分辨率成像光谱仪（MODIS）烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
