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 正值沿軸順時針旋轉;負值逆時針旋轉