背景
背景大小控制（注意：大小要寫在背景屬性后面）
background-size:auto;/* 默認(rèn)值咬像，不改變背景圖片的高度和寬度 */
background-size:100px 50px;/* 第一個值為寬，第二個值為高，當(dāng)設(shè)置一個值時直奋，將其作為圖片寬度來等比縮放 */
background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示蟀俊，當(dāng)設(shè)置一個值的時候同也將其作為圖片寬度來等比縮放 */
background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */
background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */
布局
【div自適應(yīng)屏幕高度】
想要高度100%迅栅，需要在css里加寫：html, body { height:100%}
這樣設(shè)置的div高度才能達(dá)到100%。
100%是相對的张漂，想要鋪滿整個屏幕晶默，一層層嵌套的div也得需要100%才行。
【div居中】
position:absolute;
top:50%; left:50%;
margin-top:-100px;(元素高度的一半)
margin-left:-100px;(元素寬度的一半)
【div寬度自適應(yīng)內(nèi)容】
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
容器樣式
【圓角】
border-radius:5px 5px 5px 5px航攒；
動畫
【平移動畫】
@keyframes map_mc {
? ? 0% {
? ? ? ? -webkit-transform: translate3d(0, 0, 0);
? ? ? ? transform: translate3d(0, 0, 0);
? ? }
? ? 100% {
? ? ? ? -webkit-transform: translate3d(-200px, 0, 0);
? ? ? ? transform: translate3d(-200px, 0, 0);
? ? ? ? display: none;
? ? }
}
.map_mc{
background: url(img/map_mc.png) no-repeat;
? ? -webkit-animation: 10s map_mc linear infinite normal;
? ? animation: 10s map_mc linear infinite normal;
? ? position: relative;
}
寫法2
CSS3的動畫屬性：
①.animation-name:
用于將動畫（@keyframes 語法）附加到元素上磺陡；
②. animation-duration:
定義動畫完成一次迭代（從0%到100%）所花的時間；
③. animation-timing-function:
類似于transition-timing-function屬性，
用來更細(xì)粒度的控制動畫的速度币他。
取值有: ease\ linear\ ease-in\ ease-out\ ease-in-out 之一
④.animation-iteration-count:
此屬性用來定義動畫要執(zhí)行多少次坞靶。infinite無限次
⑤. animation-direction:
當(dāng)動畫迭代時，可以使用具有alternate的 animation- direction屬性來使其他迭代反向播放動畫圆丹。 默認(rèn)normal滩愁；
⑥. animation-delay:
在開始執(zhí)行動畫時的延遲
⑦. animation-fill-mode:
取值有：none、forwards辫封、backwards硝枉、both
定義在動畫開始之前或者結(jié)束之后發(fā)生的動作
⑧. animation-play-state:
定義動畫運行還是暫停
【摘自：CSDN博主「畫一生情入顏容」的文章，原文鏈接：https://blog.csdn.net/csdn_zsdf/article/details/70807823 】
/*地球自轉(zhuǎn)動畫-start*/
.map_mc{
margin: 77px 0 0 0;
? ? ? ? position: absolute;
? ? ? ? width: 214px;
? ? ? ? height: 214px;
? ? ? ? background:url(img/map_mc.png) 156px top;
-webkit-mask: url(img/mc_zhezhao.png);
? ? -webkit-mask-size: cover;
? ? ? ? z-index:1;
? ? ? ? -webkit-animation-name: flymove;
? ? ? ? -webkit-animation-duration: 10s;
? ? ? ? -webkit-animation-timing-function: linear;
? ? ? ? -webkit-animation-iteration-count: 20000;
? ? ? ? -moz-animation-name: flymove;
? ? ? ? -moz-animation-duration: 10s;
? ? ? ? -moz-animation-timing-function: linear;
? ? ? ? -moz-animation-iteration-count: 20000;
? ? ? ? -ms-animation-name: flymove;
? ? ? ? -ms-animation-duration: 10s;
? ? ? ? -ms-animation-timing-function: linear;
? ? ? ? -ms-animation-iteration-count: 20000;
? ? }
? ? @-webkit-keyframes flymove{
? ? ? ? ? ? 0%{background-position:0px 0px;}
? ? ? ? ? ? 100%{background-position:370px 0;}
? ? ? ? }
? ? ? ? @-moz-keyframes flymove{
? ? ? ? ? 0%{background-position:0px 0px;}
? ? ? ? ? ? 100%{background-position:370px 0;}
? ? ? ? }
? ? ? ? @-ms-keyframes flymove{
? ? ? ? ? 0%{background-position:0px 0px;}
? ? ? ? ? ? 100%{background-position:370px 0;}
? ? ? ? }
/*地球動畫-end*/
旋轉(zhuǎn)動畫
樣式：
/*效果一：360°旋轉(zhuǎn) 修改rotate(旋轉(zhuǎn)度數(shù))*/
? ? ? ?.mymc{
position: relative;
z-index: 100px;
width: 837px;
height: 837px;
margin: 0 auto 0 auto;
padding-top: 80px;
overflow: hidden;
}
.mydiv{
opacity: 0.3;
position: absolute;
z-index: 100px;
width: 837px;
height: 837px;
-webkit-transition-property: -webkit-transform;
? ? -webkit-transition-duration: 1s;
? ? -moz-transition-property: -moz-transform;
? ? -moz-transition-duration: 1s;
? ? -webkit-animation: rotate 50s linear infinite;
? ? -moz-animation: rotate 50s linear infinite;
? ? -o-animation: rotate 50s linear infinite;
? ? animation: rotate 50s linear infinite;
transform-origin: 50% 50% 0px;
? ? ? ? -webkit-transform-origin: 50% 50% 0px;
? ? ? ? -ms-transform-origin:? 50% 50% 0px;
? ? ? ? -moz-transform-origin:? 50% 50% 0px;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
? ? to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
? ? to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
? ? to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
? ? to{transform: rotate(359deg)}
}
代碼：
<div class="mymc">
<div class="mydiv"><img src="img/01.png" width="837" height="837" alt=""/></div>
<div class="breathe-div"></div>
</div>
一個CSS挺酷的呼吸圈
樣式：
/*呼吸圈*/
.breathe-div {
? ? width: 500px;
? ? height: 500px;
? ? border: 1px solid #2b92d4;
? ? border-radius: 50%;
? ? text-align: center;
? ? cursor: pointer;
? ? margin:170px auto;
? ? box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
? ? overflow: hidden;
? ? -webkit-animation-timing-function: ease-in-out;
? ? -webkit-animation-name: breathe;
? ? -webkit-animation-duration: 1500ms;
? ? -webkit-animation-iteration-count: infinite;
? ? -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
? ? 0% {
? ? ? ? opacity: .4;
? ? ? ? box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
? ? }
? ? 100% {
? ? ? ? opacity: 1;
? ? ? ? border: 1px solid rgba(59, 235, 235, 0.7);
? ? ? ? box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
? ? }
}
代碼：
<div class="breathe-div"></div>
透明度
opacity:1.0;
純 css寫的圖片輪播
/*圖片輪播*/ .myad{ width: 750px; height: 422px; margin:255px 0 0 810px; position: absolute; background: url(img/yq_pic1.jpg) ; background-repeat: no-repeat; background-size:cover ; opacity: 1; animation: fateimg 10s linear infinite; } @keyframes fateimg{ 0%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 30%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 40%{background: url(img/yq_pic1.jpg);opacity: 0;background-repeat: no-repeat;background-size:cover ;} 50%{background: url(img/yq_pic2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 80%{background: url(img/yq_pic2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 90%{background: url(img/yq_pic2.jpg);opacity: 0;background-repeat: no-repeat;background-size:cover ;} 100%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} }
用CSS3實現(xiàn)鼠標(biāo)移動到圖片上圖片變大效果
代碼
div img:hover{
transition: all 0.6s;
transform: scale(1.4);
-webkit-transform: scale(1.4);
}
計算
calc()使用通用的數(shù)學(xué)運算規(guī)則倦微，但是也提供更智能的功能：
使用“+”“-”“*”“/”四則運算妻味；
可以使用百分比、px欣福、em责球、rem等單位；
可以混合使用各種單位進(jìn)行計算拓劝。
.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}
3欄等寬布局
.box{
margin-left:20px;
width:calc(100%/3 - 20px);
}
.box:nth-child(3n){
margin-left:0;
}
css 圖片/視頻的混合樣式 mix-blend-mode
（不支持IE瀏覽器）
mix-blend-mode: normal;//正常
mix-blend-mode: multiply;//正片疊底
mix-blend-mode: screen;//濾色
mix-blend-mode: overlay;//疊加
mix-blend-mode: darken;//變暗
mix-blend-mode: lighten;//變亮
mix-blend-mode: color-dodge;//顏色減淡
mix-blend-mode: color-burn;//顏色加深
mix-blend-mode: hard-light;//強光
mix-blend-mode: soft-light;//柔光
mix-blend-mode: difference;//差值
mix-blend-mode: exclusion;//排除
mix-blend-mode: hue;//色相
mix-blend-mode: saturation;//飽和度
mix-blend-mode: color;//顏色
mix-blend-mode: luminosity;//亮度
mix-blend-mode: initial;//初始
mix-blend-mode: inherit;//繼承
mix-blend-mode: unset;//復(fù)原
