CSS3筆記

背景

背景大小控制（注意：大小要寫在背景屬性后面）

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;//強(qiáng)光

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ù)原

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,443評論 0贊 11
  • CSS 指層疊樣式表（Cascading Style Sheets），是一種用來為結(jié)構(gòu)化文檔（如 HTML 文檔或...
    神齊閱讀 2,232評論 0贊 14
  • 軟件DW編譯代碼的軟件PS切圖 修圖瀏覽器chrome 谷歌firefox 火狐 FFIE 設(shè)計出設(shè)計圖的前端還...
    蒲公英_前端開發(fā)者閱讀 497評論 0贊 2
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進(jìn)行樣式設(shè)定的標(biāo)簽（元素）”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,730評論 0贊 6
  • background-image background-repeat background-position ba...
    MCM_Pan閱讀 509評論 0贊 0

友情鏈接更多精彩內(nèi)容