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

transform

鼠標(biāo)移到? 旋轉(zhuǎn)加顯示

圖片實(shí)現(xiàn)

<div?id="paper"?class="paper">
??<div?class="layer1"><img?src="https://img1.sycdn.imooc.com//szimg/59eeb17200013f8605400300-360-202.jpg"?alt=""></div>
??<div?class="layer2"><img?src="https://img1.sycdn.imooc.com//szimg/5af2a67500016b9905400300-360-202.jpg"?alt=""></div>
</div>

.paper?{
??width:?100%;
??height:?100%;
}
.paper?div{
??position:?absolute;
??left:?50%;
??margin-left:?-180px;
}
.layer1{
??opacity:?0;
}
.layer2?{
??overflow:?hidden;
}
.layer2:before{
??content:?'';
??position:?absolute;
??top:?0px;
??right:?0px;
??border-width:?0px;
??border-style:?solid;
??border-color:?rgba(0,0,0,.3)?#fff;
??border-radius:?0px?0px?0px?4px;
??transition:?all?.5s?ease-out;
}
.layer2:hover:before{
??border-right-width:?50px;
??border-bottom-width:?50px;
}
.folded?.layer2:before{
??border-right-width:?1000px;
??border-bottom-width:?600px;
}
.folded?.layer1{
??opacity:?1;
??transition:?all?.4s;
??transition-delay:?.1s;
}
.folded?.layer2{
??opacity:?0;
}

課后練習(xí)

<div?class="spinner">??
????<div></div>
????<div></div>
</div>

.spinner{
??width:?50px;
??height:?50px;
??margin:?0?auto;
}
.spinner?div{
??position:?absolute;
??width:?50px;
??height:?50px;
??border-radius:?50%;
??background-color:?green;
}
.spinner?div:nth-child(1){
???animation:?st?3s?infinite?ease-in-out;
}
.spinner?div:nth-child(2){
???animation:?st2?3s?infinite?ease-in-out;
}
@keyframes?st{
??0%,100%{
????transform:?scale(0);
????opacity:?.2;
??}
??50%{
????transform:?scale(1);
????opacity:?.1;
??}
}
@keyframes?st2{
??0%,100%{
????transform:?scale(1);
????opacity:?.1;
??}
??50%{
????transform:?scale(0);
????opacity:?.2;
??}
}

animation 實(shí)現(xiàn)

.card{??width:?250px;??height:?140px;??margin:?0px?auto;}.card?img{??position:?absolute;??border:?2px?solid?blue;??border-radius:?5px;??transform-origin:?center?400px;}.card?img:first-child{??transform:?rotate(5deg);}.card?img:last-child{??transform:?rotate(-5deg);}.card:hover?img:first-child{??transform:?rotate(20deg);??animation:?rotate1?.7s?ease;}.card:hover?img:last-child{??transform:?rotate(-20deg);??animation:?rotate2?.7s?ease;}@keyframes?rotate1{??0%{????transform:?rotate(5deg);??}??100%{????transform:?rotate(20deg);??}}@keyframes?rotate2{??0%{????transform:?rotate(-5deg);??}??100%{????transform:?rotate(-20deg);??}}

缺點(diǎn)： 動(dòng)畫(huà)結(jié)束后過(guò)渡生硬

css3 動(dòng)畫(huà)延遲 屬性 animation-delay 使用

border相臨兩邊配合為0

width:0 height:0 border的四邊很寬

animation-timing-function ： linear 動(dòng)畫(huà)從頭到尾的速度是相同的。 ease 默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。 ease-in 動(dòng)畫(huà)以低速開(kāi)始。 ease-out 動(dòng)畫(huà)以低速結(jié)束。 ease-in-out 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。

animation-delay ：定義動(dòng)畫(huà)何時(shí)開(kāi)始

transform: rotate(45deg); transform-origin:20% 40%; transform-origin: x-axis y-axis z-axis;

div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)。。 animation-duration 規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線。 animation-delay 規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。 animation-iteration-count 規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。 animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

-moz-transition /* Firefox 4 */ -webkit-transition /* Safari 和 Chrome */ -o-transition /* Opera */ .e.g: transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out; transition-property 規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱(chēng)。 transition-duration 規(guī)定完成過(guò)渡效果需要多少秒或毫秒。 transition-timing-function 規(guī)定速度效果的速度曲線。 transition-delay 定義過(guò)渡效果何時(shí)開(kāi)始。 注釋?zhuān)赫?qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。

重要

...