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