溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3怎么實(shí)現(xiàn)自適應(yīng)全屏焦點(diǎn)圖切換特效”，在日常操作中，相信很多人在CSS3怎么實(shí)現(xiàn)自適應(yīng)全屏焦點(diǎn)圖切換特效問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3怎么實(shí)現(xiàn)自適應(yīng)全屏焦點(diǎn)圖切換特效”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自適應(yīng)全屏焦點(diǎn)圖切換CSS3特效代碼</title>
<meta name="keywords" content="自適應(yīng),全屏,焦點(diǎn)圖,切換,CSS3,特效代碼" />
<meta name="description" content="自適應(yīng)全屏焦點(diǎn)圖切換CSS3特效代碼，純CSS實(shí)現(xiàn)不用任何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;/*設(shè)置元素的垂直對(duì)齊方式。*/
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 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。*/
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 個(gè)子元素的每個(gè)元素.*/
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 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素*/
z-index: 100;
animation: slideLeft 1s 1;
-webkit-animation: slideLeft 1s 1;
}
@-webkit-keyframes 'slideBottom'{
0%{
top:350px;
}
100%{
top:0;
}
}
.slideBottom:target{
/*:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素*/
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 class="slider">
<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>
到此，關(guān)于“CSS3怎么實(shí)現(xiàn)自適應(yīng)全屏焦點(diǎn)圖切換特效”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
