Rumah > Artikel > hujung hadapan web > CSS3自适应全屏焦点图切换的特效怎么做
CSS3自适应全屏焦点图切换的特效怎么做
- php中世界最好的语言asal
- 2017-11-24 13:37:171936semak imbas
给大家带来用纯CSS3实现全屏背景切换焦点图效果，不参夹JS的代码，简单易懂还好用，需要的朋友可以直接搬运。下面我们来看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自适应全屏焦点图切换CSS3特效代码</title>
<meta name="keywords" content="自适应,全屏,焦点图,切换,CSS3,特效代码" />
<meta name="description" content="自适应全屏焦点图切换CSS3特效代码，纯CSS实现不用任何js代码。" />
<style>
*{margin:0;padding:0;list-style: none;}
img.bg{min-width: 1024px;min-height: 100%;width: 100%;height: auto!important;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;}
@media screen and (max-width: 1024px) {
img.bg{
left: 50%;
margin-left: -512px;
}
}
.slider{
position: absolute;
width: 100%;
text-align: center;
z-index: 999;
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: #FFFFFF;
text-decoration: none;
font-size: 22px;
font-family: "楷体";
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{/*: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 {
/*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/
background: url(img/sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after {
background: url(img/sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after {
background: url(img/sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after {
background: url(img/sbg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after {
background: url(img/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;
}
@-webkit-keyframes 'slideLeft'{
0%{
left:-500px;
}
100%{
left:0;
}
}
.slideLeft:target{
/*:target 选择器可用于选取当前活动的目标元素*/
z-index: 100;
animation: slideLeft 1s 1;
-webkit-animation: slideLeft 1s 1;
}
@-webkit-keyframes 'slideBottom'{
0%{
top:350px;
}
100%{
top:0;
}
}
.slideBottom:target{
/*:target 选择器可用于选取当前活动的目标元素*/
z-index: 100;
animation: slideBottom 1s 1;
-webkit-animation: slideBottom 1s 1;
}
@-webkit-keyframes 'zoomIn' {
0% {
-webkit-transform: scale(0.1);
}
100% {
-webkit-transform: none;
}
}
.zoomIn:target {
z-index: 100;
-webkit-animation: zoomIn 1s 1;
animation: zoomIn 1s 1;
}
/* Zoom Out */
@-webkit-keyframes 'zoomOut' {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: none;
}
}
.zoomOut:target {
z-index: 100;
-webkit-animation: zoomOut 1s 1;
animation: zoomOut 1s 1;
}
/* Rotate */
@-webkit-keyframes 'rotate' {
0% {
-webkit-transform: rotate(-360deg) scale(0.1);
}
100% {
-webkit-transform: none;
}
}
.rotate:target {
z-index: 100;
-webkit-animation: rotate 1s 1;
animation: rotate 1s 1;
}
@-webkit-keyframes 'notTarget' {
0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
.bg:not(:target) {
-webkit-animation: notTarget 1s 1;
animation: notTarget 1s 1
}
.page {
text-align:left;
}
</style>
</head>
<body>
<div>
<ul>
<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>
<img src="img/bg1.jpg" class="bg slideLeft" id="bg1" />
<img src="img/bg2.jpg" class="bg slideBottom" id="bg2" />
<img src="img/bg3.jpg" class="bg zoomIn" id="bg3" />
<img src="img/bg4.jpg" class="bg zoomOut" id="bg4" />
<img src="img/bg5.jpg" class="bg rotate" id="bg5" />
</body>
</html>自适应全屏焦点图切换的特效就这么多了。更多精彩请关注php中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci CSS3自适应全屏焦点图切换的特效怎么做. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3常用的几种选择器Artikel seterusnya：css3怎么做幻灯片切换动画效果