target

模擬后臺(tái)服務(wù)器

框架集

frameset和body不合，所以如果用frameset就不能有body標(biāo)簽

利用框架可以把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域就是一個(gè)框架，在其中分別顯

示不同的網(wǎng)頁(yè)，同時(shí)還需要一個(gè)文件記錄框架的數(shù)量、布局、鏈接和屬性等信息，這個(gè)文件就是框架集。

框架集與框架之間的關(guān)系就是包含與被包含的關(guān)系，框架集中包含了top、left、main和bottom?4個(gè)框架。

將瀏覽器窗口分成兩個(gè)(各50%)

css3過(guò)渡動(dòng)畫

transition 過(guò)渡，轉(zhuǎn)變

transition: all 500ms ease (將所有過(guò)渡動(dòng)畫500毫秒播放，并且緩慢的播放)

.###hover{

width: 300px;

height: 300px;

background-color: skyblue;

border-radius: 60px;

鼠標(biāo)滑過(guò)的時(shí)候改變狀態(tài)，為高300寬300背景圖像變?yōu)樘焖{(lán)色并且將邊框變?yōu)閳A角邊框

css3圓角，陰影，透明度

/*border-top-left-radius: 100px 50px;左上角為橢圓圓角*/

/*border-top-left-radius: 100px;

border-top-right-radius: 100px;左、右上角為正圓圓角*/

/*border-radius: 40px;曲率半徑為40的圓角矩形*/

/*border-radius: 20%;最大200px，20%即40px*/

/*水平偏移 垂直偏移 羽化大小 擴(kuò)展大小 顏色*/

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

/*水平偏移 垂直偏移 羽化大小 擴(kuò)展大小 顏色 是否內(nèi)陰影*/

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

/*透明度30%，文字也透明了*/

opacity: 0.3;

/*背景色變透明，但文字不會(huì)透明*/

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

/*邊框透明*/

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

運(yùn)動(dòng)曲線

ease 開(kāi)始和結(jié)束慢速

ease-in 開(kāi)始是慢速

ease-out 結(jié)束時(shí)慢速

ease-in-out 開(kāi)始和結(jié)束時(shí)慢速

@keyframes：定義關(guān)鍵幀動(dòng)畫

animation-name：動(dòng)畫名稱

animation-duration：動(dòng)畫時(shí)間

animation-timing-function：動(dòng)畫曲線

作者：王林1907

鏈接：https://www.jianshu.com/p/acb2aaec72b7

來(lái)源：簡(jiǎn)書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

圖片文字遮罩

rgba：rgba(0，0，0，0.1)第四個(gè)為透明度

變行

.box:hover{

transform: translate(50px,50px);

}? 平移過(guò)渡

.box2:hover{

transform: rotate(3600deg);

background-color: purple

}? ? 旋轉(zhuǎn)過(guò)渡

.box3:hover{

transform: scale(0.5,0.2);

}? 縮放過(guò)渡

.box4:hover{

transform: skew(0, 45deg);

}? 斜角過(guò)渡

羽化大小不可為負(fù)? ? ? ? deg為度數(shù)單位? ? ? ? perspective一般值為800px? ? ? ? 正值沿軸順時(shí)針旋轉(zhuǎn)；負(fù)值逆時(shí)針旋轉(zhuǎn)

總結(jié)

以上是生活随笔為你收集整理的css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。