資訊專欄INFORMATION COLUMN
摘要：六過(guò)渡和動(dòng)畫(huà)過(guò)渡效果，通過(guò)指定某些屬性和變幻參數(shù)，以原始定義為開(kāi)始狀態(tài)，通過(guò)鼠標(biāo)操作變化，狀態(tài)定義結(jié)束狀態(tài)，實(shí)現(xiàn)過(guò)渡效果。
一、圓角邊框
border-radius:5px;
二、多背景圖
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
三、顏色和透明度(由原來(lái)的rgb到現(xiàn)在的rgba)
background: rgba(0,0,0,.5);
四、多列布局和彈性盒模型
display: flex;
五、盒子的變幻（2D、3D）
transform: translate(50px,100px);//移動(dòng) transform: rotate();//旋轉(zhuǎn) transform: scale();//縮放 transform: skew();//傾斜
用于元素的直接或者鼠標(biāo)感應(yīng)變化，沒(méi)有其他變幻參數(shù)（如延時(shí)，持續(xù)時(shí)間，變幻曲線），立即改變。
六、過(guò)渡和動(dòng)畫(huà)
transition: width 1s linear 2s;
過(guò)渡效果，transition通過(guò)指定某些屬性和變幻參數(shù)，以原始定義為開(kāi)始狀態(tài)，通過(guò)鼠標(biāo)操作變化(hover)，hover狀態(tài)定義結(jié)束狀態(tài)，實(shí)現(xiàn)過(guò)渡效果。
animation: myfirst 5s;
@keyframes myfirst {
0% {background: block;}
25% {background: red;}
50% {background: yellow;}
100% {background: green;}
}
動(dòng)畫(huà)效果，加強(qiáng)版的過(guò)渡效果，通過(guò)animation指定動(dòng)畫(huà)名和動(dòng)畫(huà)參數(shù)，@keyframes定義動(dòng)畫(huà)內(nèi)容，根據(jù)參數(shù)自動(dòng)觸發(fā)。
七、引入web字體（在服務(wù)器端存儲(chǔ)）
@font-face {
font-family: myfirstfont;
src: url(sansation_light.woff);
}
div {
font-family: myfirstfont;
}
八、媒體查詢
body{
background: yellow;
}
@media screen and (max-width: 480px){
background: red;
}
九、陰影
h1 {//文字陰影
text-shadow: 5px 5px 5px red;
}
div {//盒子陰影
box-shadow: 10px 5px 5px yellow;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/117353.html
摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
摘要：要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容指定要添加效果的屬性指定效果的持續(xù)時(shí)間。當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值在最后一個(gè)關(guān)鍵幀中定義。在所指定的一段時(shí)間內(nèi)，在動(dòng)畫(huà)顯示之前，應(yīng)用開(kāi)始屬性值在第一個(gè)關(guān)鍵幀中定義。 1.前言 css3這個(gè)相信大家不陌生了，是個(gè)非常有趣，神奇的東西！有了css3，js都可以少寫(xiě)很多！我之前也寫(xiě)過(guò)關(guān)于css3的文章，也封裝過(guò)css3的一些小動(dòng)畫(huà)。個(gè)人覺(jué)得css3不難，但...
摘要：如果沒(méi)有學(xué)習(xí)過(guò)計(jì)算機(jī)科學(xué)的程序員，當(dāng)我們?cè)谔幚硪恍﹩?wèn)題時(shí)，比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組無(wú)疑是一個(gè)很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見(jiàn) CSS 布局方式詳見(jiàn)： 一些常見(jiàn)的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...
閱讀 3493·2021-10-08 10:15
閱讀 6248·2021-09-23 11:56
閱讀 1527·2019-08-30 15:55
閱讀 527·2019-08-29 16:05
閱讀 2786·2019-08-29 12:34
閱讀 2095·2019-08-29 12:18
閱讀 967·2019-08-26 12:02
閱讀 1713·2019-08-26 12:00
