亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

transform

鼠標移到? 旋轉加顯示

圖片實現

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

課后練習

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

.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);??}}

缺點： 動畫結束后過渡生硬

css3 動畫延遲 屬性 animation-delay 使用

border相臨兩邊配合為0

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

animation-timing-function ： linear 動畫從頭到尾的速度是相同的。 ease 默認。動畫以低速開始，然后加快，在結束前變慢。 ease-in 動畫以低速開始。 ease-out 動畫以低速結束。 ease-in-out 動畫以低速開始和結束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

animation-delay ：定義動畫何時開始

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 規定需要綁定到選擇器的 keyframe 名稱。。 animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。 animation-timing-function 規定動畫的速度曲線。 animation-delay 規定在動畫開始之前的延遲。 animation-iteration-count 規定動畫應該播放的次數。 animation-direction 規定是否應該輪流反向播放動畫。

-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 規定設置過渡效果的 CSS 屬性的名稱。 transition-duration 規定完成過渡效果需要多少秒或毫秒。 transition-timing-function 規定速度效果的速度曲線。 transition-delay 定義過渡效果何時開始。 注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。

重要

...