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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

正在回答

1 回答

css部分-------------------------------->

@font-face{ ?/*將字體導(dǎo)入到網(wǎng)頁(yè)*/

font-family:"Raphaelicons" ;

src:url("fonts/raphaelicons-webfont.eot") format('eot'),

url("fonts/raphaelicons-webfont.svg") format('svg'),

url("fonts/raphaelicons-webfont.ttf") format('truetype'),

url("fonts/raphaelicons-webfont.woff") format('woff');

font-weight:normal;

font-style:normal;

}

body{

font-family: Georgia,serif;

background-color: #ddd;

font-weight: 400;

font-size: 15px;

color: #333;

overflow: hidden;

-webkit-font-smoothing:antialiased; /*功能:用于設(shè)置字體的抗鋸齒或者說(shuō)是光滑度的屬性*/

/*語(yǔ)法規(guī)則:font-smoothing:subpixel-antialiased | none | antialiased*/

/*取值說(shuō)明:none用于小像素的文本,subpixel-antialiased是瀏覽器默認(rèn)的,antialiased反鋸齒*/

}

a{

text-decoration: none;

}

/*清除浮動(dòng)*/

.clr{

width: 0;

height: 0;

overflow: hidden;

clear: both;

padding: 0;

margin:0;

}

.st-container{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

font-family: "Tsentsiu Mono HT"

}

.st-container input,

.st-container a{

letter-spacing: 2px;

width: 20%;

height: 36px;

line-height:36px;

position: fixed;

bottom: 0;?

cursor: pointer; /*光標(biāo)改成手型*/

}

.st-container input{

opacity: 0; /*存在,透明度為 0 */

z-index: 100; /*比a的等級(jí)高*/

}

.st-container a{

z-index: 10; /*比input的等級(jí)低*/

font-weight: 700;

font-size: 16px;

background-color: #e23a6e;

text-align: center;

color: #eee;

/*text-shadow: 0 0 2px #c6a;*/

border-top-left-radius: 6px;

border-top-right-radius: 6px;

}

/*默認(rèn)是重疊*/

#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-color: #821134;

}

/*設(shè)置底部的三角形*/

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

content:"";

width: 0;

height: 0;

overflow: hidden;

border:20px solid transparent;

border-bottom-color: #821134;

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -20px;

}

.st-container input:hover + a{

background-color: #ad244f;

}

/*內(nèi)容*/

.st-scroll,

.st-panel{

width: 100%;

height: 100%;

position: relative;

}

.st-scroll{

left: 0;

top: 0;

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

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

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

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

transform:translate3D(0,0,0);

-webkit-backface-visibility:hidden; /*功能:定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)*/

/*語(yǔ)法規(guī)則:backface-visibility:visible | hidden;*/

-webkit-transition:all 0.5s ease-in-out; /*移動(dòng)*/

-o-transition:all 0.5s ease-in-out;

-ms-transition:all 0.5s ease-in-out;

-moz-transition:all 0.5s ease-in-out;

transition:all 0.5s ease-in-out;

}

.st-panel{

background-color: #fff;

overflow: hidden;

}

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

-webkit-transform:translateY(0%);

-moz-transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

transform:translateY(0%);

}

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

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

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

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

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

transform:translateY(-100%);

}

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

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

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

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

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

transform:translateY(-200%);

}

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

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

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

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

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

transform:translateY(-300%);

}

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

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

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

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

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

transform:translateY(-400%);

}

/*設(shè)置頂部的三角形*/

.st-desc{

width: 200px;

height: 200px;

background-color: #fa96b5;

position: absolute;

left: 50%;

top: 0;

border-bottom-right-radius: 12px;

margin-left: -100px;

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

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

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

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

}

/*屬性選擇器放在中括號(hào)之內(nèi)*/

[data-icon]:after{

content: attr(data-icon);

width: 200px;

height: 200px;

color: #fff;

font-size: 90px;

text-align: center;

line-height: 200px;

position: absolute;

left: 50%;

top: 50%;

margin: -100px 0 0 -100px;

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

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

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

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

transform:rotate(-45deg) translateY(25%);

font-family:"Raphaelicons";

text-shadow: 0 0 2px lightgreen;

}

.st-panel h2{

color: #e23a6e;

font-size:54px;

line-height: 50px;

text-align: center;

font-weight: 900;

letter-spacing: 2px;

width: 80%;

position: absolute;

left: 10%;

top: 40%;

margin-top: -70px;

text-shadow: 0 0 30px blue;

-webkit-backface-visibility:hidden;

}


#st-control-1:checked ~ .st-scroll #st-panel-1 h2,

#st-control-2:checked ~ .st-scroll #st-panel-2 h2,

#st-control-3:checked ~ .st-scroll #st-panel-3 h2,

#st-control-4:checked ~ .st-scroll #st-panel-4 h2,

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

-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

-o-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

animation:moveDown 0.6s ease-in-out 0.2s backwards ;

}

@-webkit-keyframes moveDown{

0%{

-webkit-transform:translateY(-10px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-moz-keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-o-keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

.st-panel p{

position: absolute;

width: 100%;

left: 25;

top: 50%;

font-size: 16px;

line-height: 22px;

padding: 0;

text-align: center;

-webkit-backface-visibility:hidden;

color: #8b8b8b;

margin-top: 10px;

}

#st-control-1:checked ~ .st-scroll #st-panel-1 p,

#st-control-2:checked ~ .st-scroll #st-panel-2 p,

#st-control-3:checked ~ .st-scroll #st-panel-3 p,

#st-control-4:checked ~ .st-scroll #st-panel-4 p,

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

-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

-o-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

animation:moveUp 0.6s ease-in-out 0.2s backwards ;

}

@-webkit-keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-moz-keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-o-keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

.st-color{

background-color: #fa96b5;

}

.st-color .st-desc{

background-color: #fff;

}

.st-color [data-icon]:after{

color: #fa96b5;

}

.st-color h2{

color: #fff;

text-shadow: 0 0 30px black;

}

.st-color p{

color: #eee;

}

/*響應(yīng)式實(shí)現(xiàn)自適應(yīng)*/

@media screen and (max-width: 520px) {

.st-panel h2{

font-size: 42px;

}

.st-panel p{

width: 90%;

left: 10%;

margin-top: 0;

}

.st-container > a{

font-size: 3px;

}

}

@media screen and (max-width: 360px) {

.st-panel h2{

font-size: 42px;

}

.st-panel p{

width: 90%;

left: 10%;

margin-top: 0;

}

.st-container > a{

font-size: 10px;

}

.st-desc{

width: 120px;

height: 120px;

margin-left: -60px;

}

[data-icon]:after{

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

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

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

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

transform:rotate(-45deg) translateY(16%);

}

}

html部分------------------------------------------->


<!doctype html>

<html dir="ltr"> <!-- dir屬性指定文字的排列方向 -->

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome = 1"> <!-- 告知IE使用最新的渲染模式 -->

<meta name="viewport" content="width=device-width,initial-scale=1" > <!-- 強(qiáng)制頁(yè)面適應(yīng)設(shè)備的寬度,禁止縮放 -->

<title>CSS3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果</title>

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

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

</head>

<body>

<div>

<div>

<!-- nav-begin -->

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

<!-- nav-end content begin-->

<div>

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

<div data-icon = "H"></div>

<h2>SERENDIPITY</h2>

<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

</section>

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

<div data-icon = "2"></div>

<h2>HAPPINESS</h2>

<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

</section>

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

<div data-icon = "B"></div>

<h2>TRANQUILLITY</h2>

<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

</section>

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

<div data-icon = "x"></div>

<h2>POSIBILITY</h2>

<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

</section>

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

<div data-icon = "?"></div>

<h2>PASSION</h2>

<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

</section>

</div>

</div>

</div>


</body>

</html>


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

舉報(bào)

0/150
提交
取消
css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果
  • 參與學(xué)習(xí)       54370    人
  • 解答問(wèn)題       391    個(gè)

CSS3 打造頁(yè)面之間的平滑過(guò)渡效果,帶來(lái)神奇的體驗(yàn)

進(jìn)入課程

求網(wǎng)頁(yè)代碼

我要回答 關(guān)注問(wèn)題
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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