天天看點

css3圓角360度轉動畫,target,架構集,css3過渡動畫,css3圓角-陰影-透明度,運動曲線,圖檔文字遮罩,變形...

target

模拟背景伺服器

架構集

frameset和body不合,是以如果用frameset就不能有body标簽

利用架構可以把浏覽器視窗劃分為若幹個區域,每個區域就是一個架構,在其中分别顯

示不同的網頁,同時還需要一個檔案記錄架構的數量、布局、連結和屬性等資訊,這個檔案就是架構集。

架構集與架構之間的關系就是包含與被包含的關系,架構集中包含了top、left、main和bottom 4個架構。

将浏覽器視窗分成兩個(各50%)

css3過渡動畫

transition 過渡,轉變

transition: all 500ms ease (将所有過渡動畫500毫秒播放,并且緩慢的播放)

.###hover{

width: 300px;

height: 300px;

background-color: skyblue;

border-radius: 60px;

滑鼠滑過的時候改變狀态,為高300寬300背景圖像變為天藍色并且将邊框變為圓角邊框

css3圓角,陰影,透明度

box-shadow: 10px 10px 10px 0px #bfa;

box-shadow: 0px 0px 20px 2px red inset;

opacity: 0.3;

background-color: rgba(255,215,0,0.3);

border: 2px solid rgba(0,0,0,0.3);

運動曲線

ease 開始和結束慢速

ease-in 開始是慢速

ease-out 結束時慢速

ease-in-out 開始和結束時慢速

@keyframes:定義關鍵幀動畫

animation-name:動畫名稱

animation-duration:動畫時間

animation-timing-function:動畫曲線

作者:王林1907

連結:https://www.jianshu.com/p/acb2aaec72b7

來源:簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

圖檔文字遮罩

rgba:rgba(0,0,0,0.1)第四個為透明度

變行

.box:hover{

transform: translate(50px,50px);

}  平移過渡

.box2:hover{

transform: rotate(3600deg);

background-color: purple

}    旋轉過渡

.box3:hover{

transform: scale(0.5,0.2);

}  縮放過渡

.box4:hover{

transform: skew(0, 45deg);

}  斜角過渡

羽化大小不可為負        deg為度數機關        perspective一般值為800px        正值沿軸順時針旋轉;負值逆時針旋轉