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