第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

<form id="52sox"><thead id="52sox"><sup id="52sox"></sup></thead></form>

慕課網(wǎng)首頁
免費(fèi)課
實(shí)戰(zhàn)課
體系課
發(fā)現(xiàn)
評(píng)價(jià) 教程專欄手記
商業(yè)合作
企業(yè)服務(wù) 講師入駐

                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /css3實(shí)現(xiàn)網(wǎng)頁平滑過渡效果

點(diǎn)擊按鈕為什么頁面沒有跳轉(zhuǎn)呢？是什么地方錯(cuò)誤了？

我是嚴(yán)格按照視頻寫的代碼，可是點(diǎn)擊導(dǎo)航按鈕頁面為什么不能跳轉(zhuǎn)呢？求各位大神指點(diǎn)。

<!doctype <!DOCTYPE html>

<html>

<head>

<mata charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>index</title>

<link type="text/css" rel="stylesheet" href="../normalize.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<div class="st-container">

<input type="radio" name="radio-set" checked="checked" id="st-control-1">

<a href="#st-panel-1">Serendipity</a>

<input type="radio" name="radio-set" id="st-control-2">

<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" ?id="st-control-3">

<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4">

<a href="#st-panel-4">Posibility</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Passion</a>

</div>

<div class="st-scroll">

<section class="st-panel" id="st-panel-1">

<div class="st-desc" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel st-color" id="st-panel-2">

<div class="st-desc" data-icon="2"></div>

<h2>Happiness</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel" id="st-panel-3">

<div class="st-desc" data-icon="B"></div>

<h2>Posibility</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel st-color" id="st-panel-4">

<div class="st-desc" data-icon="X"></div>

<h2>Posibility</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel" id="st-panel-5">

<div class="st-desc" data-icon="C"></div>

<h2>Passion</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

</div>

</div>

</body>

</html>

body{

??????????? font-family: Georgia,serif;

??????????? background: #ddd;

??????????? font-weight: 400;

??????????? font-size: 15px;

??????????? color:#333;

??????????? overflow: hidden;

??????????? -webkit-font-smoothing:antialiased;

??????????? }

a{

??????????? text-decoration: none;

??????????? color:#555;

}

.clr{

??????????? width:0;

??????????? height:0;

??????????? overflow: hidden;

??????????? clear: both;

??????????? padding:0;

??????????? margin:0;

}

.st-container{

??????????? width: 100%;

??????????? height: 100$;

??????????? position: absolute;

??????????? top: 0;

??????????? left: 0;

??????????? font-family: "Josefin Slab","Myrida Pro",Arial,sans-serif;

}

.st-container>input,

.st-container>a{

??????????? width:20%;

??????????? height:34px;

??????????? line-height: 34px;

??????????? position: fixed;

??????????? bottom: 0;

??????????? cursor: pointer;

}

.st-container>input{

??????????? z-index: 2;

??????????? opacity: 0;

}

.st-container>a{

??????????? z-index:1;

??????????? font-weight: 700;

??????????? font-size: 16px;

??????????? background: #e23ae6;

??????????? text-align: center;

??????????? color:#fff;

??????????? text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}

#st-control-1,#st-control-1+a{

??????????? left: 0%;

}

#st-control-2,#st-control-2+a{

??????????? left: 20%;

}

#st-control-3,#st-control-3+a{

??????????? left: 40%;

}

#st-control-4,#st-control-4+a{

??????????? left: 60%;

}

#st-control-5,#st-control-5+a{

??????????? left: 80%;

}

.st-container input:checked+a,??

.st-container input:checked:hover+a{

??????????? background: #821134;

}

.st-container input:hover+a{

??????????? background:#AD244F;

}

.st-container input:checked+a:after{

??????????? content:"";

??????????? width:0px;

??????????? height:0px;

??????????? overflow: hidden;

??????????? border:20px solid transparent;

??????????? border-bottom-color:#821134;

??????????? position: absolute;

??????????? bottom: 100%;

??????????? left:50%;

??????????? margin-left: -20px;

}

/*內(nèi)容*/

.st-scroll,

.st-panel{

??????????? width: 100%;

??????????? height:100%;

??????????? position: relative;

}

.st-scroll{

??????????? left: 0;

??????????? top: 0;

??????????? transform:translate3d(0,0,0);

??????????? -webkit-transform:translate3d(0,0,0);

??????????? -moz-transform:translate3d(0,0,0);

??????????? -o-transform:translate3d(0,0,0);

??????????? -ms-transform:translate3d(0,0,0);

??????????? -webkit-backface-visibility:hidden;

??????????? transistion:all 0.6s ease-in-out;

??????????? -weibkit-transistion:all 0.6s ease-in-out;

??????????? -ms-transistion:all 0.6s ease-in-out;

??????????? -moz-transistion:all 0.6s ease-in-out;

??????????? -o-transistion:all 0.6s ease-in-out;

}

.st-panel{

??????????? background: #fff;

??????????? overflow: hidden;

}

#st-control-1:checked~.st-scroll{

??????????? transform:translateY(0%);

??????????? -o-transform:translateY(0%);

??????????? -ms-transform:translateY(0%);

??????????? -moz-transform:translateY(0%);

??????????? -webkit-transform:translateY(0%);

}

#st-control-2:checked~.st-scroll{

??????????? transform:translateY(-100%);

??????????? -o-transform:translateY(-100%);

??????????? -ms-transform:translateY(-100%);

??????????? -moz-transform:translateY(-100%);

??????????? -webkit-transform:translateY(-100%);

}

#st-control-3:checked~.st-scroll{

??????????? transform:translateY(-200%);

??????????? -o-transform:translateY(-200%);

??????????? -ms-transform:translateY(-200%);

??????????? -moz-transform:translateY(-200%);

??????????? -webkit-transform:translateY(-200%);

}

#st-control-4:checked~.st-scroll{

??????????? transform:translateY(-300%);

??????????? -o-transform:translateY(-300%);

??????????? -ms-transform:translateY(-300%);

??????????? -moz-transform:translateY(-300%);

??????????? -webkit-transform:translateY(-300%);

}

#st-control-5:checked~.st-scroll{

??????????? transform:translateY(-400%);

??????????? -o-transform:translateY(-400%);

??????????? -ms-transform:translateY(-400%);

??????????? -moz-transform:translateY(-400%);

??????????? -webkit-transform:translateY(-400%);

}

.st-desc{

??????????? width:200px;

??????????? height:200px;

??????????? background: #fa96b5;

??????????? transform:translateY(-50%) rotate(45deg);

??????????? -o-transform:translateY(-50%) rotate(45deg);

??????????? -moz-transform:translateY(-50%) rotate(45deg);

??????????? -ms-transform:translateY(-50%) rotate(45deg);

??????????? -webkit-transform:translateY(-50%) rotate(45deg);

??????????? position: absolute;

??????????? left: 50%;

??????????? top: 0;

??????????? margin-left: -100%;

?

}

qq_Sunshine_50

2015-12-31

源自：css3實(shí)現(xiàn)網(wǎng)頁平滑過渡效果 2-2

關(guān)注問題我要回答

3732

操作

收起

6 回答

SenbinJiang 回答被采納 +3 積分
2016-01-03

你用了transform，但是沒有用transition。#st-control-n:checked~.st-scroll{ 這些地方應(yīng)該使用transition }

0 回復(fù) 有任何疑惑可以回復(fù)我~

慕標(biāo)1909118
2016-09-12

外面的transition 里面是transistion? 多了s啊

0 回復(fù) 有任何疑惑可以回復(fù)我~

zeroweb
2016-01-29

錨點(diǎn)的使用不是你這樣的吧 ?建議你去看看錨點(diǎn)的使用方法

代碼寫規(guī)范點(diǎn)?

0 回復(fù) 有任何疑惑可以回復(fù)我~

qq_Sunshine_50 提問者
2016-01-05

我的代碼錯(cuò)誤太多了，但是還有其他的主要錯(cuò)誤導(dǎo)致沒有切換效果。。。。

0 回復(fù) 有任何疑惑可以回復(fù)我~

SenbinJiang
2016-01-05

在你的代碼中有看到“transistion”，不應(yīng)該是“Transition”嗎？

0 回復(fù) 有任何疑惑可以回復(fù)我~

qq_Sunshine_50 提問者
2016-01-05

不對(duì)。。。。以下是我往下寫的代碼，即使有transition也應(yīng)該有切換的效果，但是沒有，您知道怎么解決嗎？

.st-scroll,

.st-panel{

width:?100%;

height:100%;

position:?relative;

}

.st-scroll{

left:?0;

top:?0;

transform:translate3d(0,0,0);

-webkit-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-webkit-backface-visibility:hidden;

transistion:all?0.6s?ease-in-out;

-weibkit-transistion:all?0.6s?ease-in-out;

-ms-transistion:all?0.6s?ease-in-out;

-moz-transistion:all?0.6s?ease-in-out;

-o-transistion:all?0.6s?ease-in-out;

}

.st-panel{

background:?#fff;

overflow:?hidden;

}

#st-control-1:checked~.st-scroll{

transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

-moz-transform:translateY(0%);

-webkit-transform:translateY(0%);

}

#st-control-2:checked~.st-scroll{

transform:translateY(-100%);

-o-transform:translateY(-100%);

-ms-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-webkit-transform:translateY(-100%);

}

#st-control-3:checked~.st-scroll{

transform:translateY(-200%);

-o-transform:translateY(-200%);

-ms-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-webkit-transform:translateY(-200%);

}

#st-control-4:checked~.st-scroll{

transform:translateY(-300%);

-o-transform:translateY(-300%);

-ms-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-webkit-transform:translateY(-300%);

}

#st-control-5:checked~.st-scroll{

transform:translateY(-400%);

-o-transform:translateY(-400%);

-ms-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-webkit-transform:translateY(-400%);

}

.st-desc{

width:200px;

height:200px;

background:?#fa96b5;

transform:translateY(-50%)?rotate(45deg);

-o-transform:translateY(-50%)?rotate(45deg);

-moz-transform:translateY(-50%)?rotate(45deg);

-ms-transform:translateY(-50%)?rotate(45deg);

-webkit-transform:translateY(-50%)?rotate(45deg);

position:?absolute;

left:?50%;

top:?0;

margin-left:?-100%;

?

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

css3實(shí)現(xiàn)網(wǎng)頁平滑過渡效果

參與學(xué)習(xí) 54370 人
解答問題 391 個(gè)

CSS3 打造頁面之間的平滑過渡效果，帶來神奇的體驗(yàn)

進(jìn)入課程

本課相似問答

1 回答為什么點(diǎn)擊底部導(dǎo)航頁面不改變

2 回答為什么照著寫的代碼，但是不能進(jìn)行頁面的跳轉(zhuǎn)

1 回答導(dǎo)航按鈕這一步位置顏色都成功了，但是只有中間的兩個(gè)按鈕可以點(diǎn)擊，兩邊的按鈕點(diǎn)擊鼠標(biāo)沒變，這正常嗎？

4 回答為什么設(shè)置了單選按鈕透明度，怎么沒反應(yīng)

2 回答為什么我編的既不能點(diǎn)擊其他按鈕變色，也生成不了小三角形？代碼都是一樣的 ??？

搜索更多本課相關(guān)問答

點(diǎn)擊按鈕為什么頁面沒有跳轉(zhuǎn)呢？是什么地方錯(cuò)誤了？

我要回答關(guān)注問題

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

<meter id="hsuc7"><span id="hsuc7"></span></meter>

<strong id="hsuc7"></strong>