CSS 样式修改技巧及心得汇总
相信你的眼睛，而不是數(shù)字！！！
結(jié)構(gòu)要和樣式分離！！！
設(shè)置網(wǎng)頁(yè)的字體樣式：
html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li, legend {font-family: Arial, Helvetica, verdana, '微軟雅黑', sans-serif;}使div獨(dú)占一行：
display:block;選擇被用戶選取的部分：
::selection{為其設(shè)置樣式}單行文本的溢出顯示省略號(hào)(…)
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;使元素隱藏<不顯示>：
display:none;使文字溢出部分隱藏<不顯示>：
overflow:hidden;讓bootstrap默認(rèn)下拉菜單二級(jí)和一級(jí)一樣寬：
.dropdown-menu{min-width: 100%;}改變bootstrap默認(rèn)導(dǎo)航條縮小后三道杠的顯示顏色：
.navbar-toggle{background-color: black;}改變bootstrap導(dǎo)航欄默認(rèn)的懸浮顏色及邊框：
.nav-tabs li a:visited{/*改變bootstrap默認(rèn)懸浮顏色*/background-color: #f5f5f5;/*去掉bootstrap默認(rèn)邊框*/border: 0; }CSS畫三角形：
.triangle{width: 0;height: 0;overflow: hidden;border-width: 10px;border-color: transparent transparent #0083ff transparent;border-style: dashed dashed solid dashed; }設(shè)置背景顏色為透明：
background-color: rgba(0,0,0,0);讓圖片在div中100%顯示：
.類名 img{width: 100%;}去掉鏈接<a標(biāo)簽>默認(rèn)hover的下劃線：
a:hover {text-decoration: none;}去掉li前面的圓點(diǎn)：
list-style:none;讓文字在div中水平居中顯示：
height: 20px;line-height: 20px;text-align: center;line-height 本身就可以起到設(shè)置高度的作用！！！
網(wǎng)站首頁(yè)全屏大圖可以設(shè)置如下屬性實(shí)現(xiàn)：
width: 100%; position: absolute; top: 0; padding: 0; z-index: -999;為文字添加下劃線：
{border-bottom: 1px solid #fff;} text-decoration: underline;把文字隱藏起來(lái)：
color: transparent鼠標(biāo)指上去箭頭變?yōu)槭中?#xff1a;
cursor:pointer;使a鏈接不能點(diǎn)擊：
pointer-events: none;強(qiáng)制文字不換行：
white-space:nowrap;為div畫xx像素的圓角：
border-radius:xxpx;樣式相同的標(biāo)簽用class命名，統(tǒng)一定義管理。
可以預(yù)先用class定義好如：背景顏色<.red、.black等>、字體大小<.eighteen-px>.
多用類<class>命名，方便管理，不要用駝峰命名法！類名統(tǒng)一用小寫英文字母，中間用中橫線<->分開。
使圖片或XX漸變多少秒<s>后出現(xiàn)：
transition:3s;為總的div定義如下css,可以讓頁(yè)面整體居中：
margin:0 auto;按鈕或鏈接點(diǎn)擊時(shí)不出現(xiàn)藍(lán)色矩形區(qū)域：
*::selection{background:none;}讓DIV居中顯示：
{position: relative;left: 50%;transform:translateX(-50%) ;} position:absolute; left:50%; /* 定位父級(jí)的50% */ top:50%;<去掉后只有左右位移> transform: translate(-50%,-50%); /*自己的50% */讓圖片或DIV居中：<XX指圖片或DIV的一半>
1. position: relative;left: calc(50% - XXpx); 2. position: absolute;left: 50%;transform: translate(-50%,-50%);background-image圖片出現(xiàn)邊框是因?yàn)閕mg標(biāo)簽沒(méi)有設(shè)置src，顯示的是系統(tǒng)的沒(méi)有圖片的標(biāo)記，并不是html代碼的問(wèn)題。，設(shè)置一個(gè)空白圖/透明圖就可以了。
改變屏幕尺寸時(shí)，修改HTML對(duì)應(yīng)CSS使頁(yè)面符合屏幕大小：
@media (max-width:1024px) { .service-img {width: 100%;padding: 0;} }?
使瀏覽器保留空白/空格：
white-space:preCss實(shí)現(xiàn)文字左右對(duì)齊：
.XXX p {text-align: justify;}連字符斷行：
p {-moz-hyphens: auto;-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;word-wrap: break-word;}得到一條從黃色到紅色的垂直漸變：
background: rgb(255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red);添加文字陰影：
text-shadow: h-shadow v-shadow blur color;注釋：text-shadow 屬性向文本添加一個(gè)或多個(gè)陰影。該屬性是逗號(hào)分隔的陰影列表，每個(gè)陰影有兩個(gè)或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。省略的長(zhǎng)度是 0。
添加盒子陰影：
box-shadow: h-shadow v-shadow blur spread color inset;注釋：box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是 0。
只要把半透明的黑色或白色疊加在主色調(diào)上，即可產(chǎn)生主色調(diào)的亮色和暗色變體：
hsla(0,0%,100%,.2),transparent為元素添加一道10px寬的邊框，但在左邊不加邊框可以這樣寫：<減少后期改動(dòng)量>
border-width: 10px; border-left-width: 0;應(yīng)用display: inline-block會(huì)讓元素根據(jù)內(nèi)容來(lái)決定自身的尺寸
超鏈接的顏色設(shè)定為與頁(yè)面中其他文本相同：
a { color: inherit; }不要忘記為替換元素（比如 img、object、video、iframe 等）設(shè)置一個(gè)max-width，值為100%！
讓背景圖片完整地鋪滿一個(gè)容器：<在移動(dòng)網(wǎng)頁(yè)中通過(guò)CSS 把一張大圖縮小顯示往往是不太明智的>
background-size: cover合理使用簡(jiǎn)寫！如：用background代替background-color
如果只為某個(gè)屬性提供一個(gè)值，那它就會(huì)擴(kuò)散并應(yīng)用到列表中的每一項(xiàng)!!!
背景會(huì)被元素的裁切掉如：border box（邊框的外沿框）：
background-clip:border-box;多重投影(邊框)：
例如： box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; 或： border: 10px solid #655; outline: 5px solid deeppink;用一張整合圖片為所有圖片服務(wù)：<一圖定全網(wǎng)>
香港網(wǎng)站示例： .Banking-layout .value-con .Banking-img7 {background-image: url(/images/pic/Service/Background-img/bg-img.jpg);height: 80px;width: 80px;} .Banking-layout .value-con .Banking-img7 {background-position: 240px 240px;}請(qǐng)不要忘記在calc() 函數(shù)內(nèi)部的- 和+ 運(yùn)算符的兩側(cè)各加一個(gè)空白符，否則會(huì)產(chǎn)生解析錯(cuò)誤！
使文字單行顯示，多佘以省略號(hào)的形式出現(xiàn)：
xx {overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}條紋背景CSS寫法
1.橫向條紋背景CSS寫法：
如:background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% xxpx;2.豎向條紋背景CSS寫法：
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0); background-size: xxpx 100%;3.斜向條紋背景CSS寫法：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size: xxpx xxpx;4.任意角度條紋背景CSS寫法：<如60度>
background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0, #58a 30px);border-radius可以單獨(dú)指定水平和垂直半徑，只要用一個(gè)斜杠（/）分隔這兩個(gè)值即可，它不僅可以接受長(zhǎng)度值，還可以接受百分比值。
如何創(chuàng)建一個(gè)自適應(yīng)的橢圓：<如果要?jiǎng)?chuàng)建一個(gè)自適應(yīng)的橢圓，我們可以把這兩個(gè)半徑值都設(shè)置為50%：>
border-radius: 50%; 或:border-radius: 50% / 50%;如何用CSS來(lái)畫一個(gè)平行四邊形：
嵌套元素方案：
<a href="#yolo" class="button"> <div>Click me</div> </a> .button { transform: skewX(-45deg); } .button > div { transform: skewX(45deg); }偽元素方案：
.button { position: relative; /* 其他的文字顏色、內(nèi)邊距等樣式…… */ } .button::before { content: ''; /* 用偽元素來(lái)生成一個(gè)矩形 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); }菱形圖片：
基于變形的方案：
<div class="picture"> <img src="adam-catlace.jpg" alt="..." /> </div> .picture {width: 400px;transform: rotate(45deg);overflow: hidden;} .picture > img {max-width: 100%;transform: rotate(-45deg);}或：
.picture {width: 400px;transform: rotate(45deg);overflow: hidden;} .picture > img {max-width: 100%;transform: rotate(-45deg) scale(1.42);}一邊切角效果：
background: #58a;background:linear-gradient(-45deg, transparent 15px, #58a 0);兩邊切角效果：
background: #58a; background:linear-gradient(-45deg, transparent 15px, #58a 0)right, linear-gradient(45deg, transparent 15px, #655 0)left; background-size: 50% 100%; background-repeat: no-repeat;弧形切角（內(nèi)凹圓角）：
background: #58a; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;如何畫出一個(gè)梯形：
transform: scaleY(1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom;如何做出下面圖片所示的效果：
nav > a {position: relative;display: inline-block;padding: .3em 1em 0;} nav > a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #ccc; background-image: linear-gradient( hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); border: 1px solid rgba(0,0,0,.4); border-bottom: none; border-radius: .5em .5em 0 0; box-shadow: 0 .15em white inset; transform: perspective(.5em) rotateX(5deg); transform-origin: bottom; }我們只需要把transform-origin 改成bottom left 或bottom right，就可以立即得到左側(cè)傾斜或右側(cè)傾斜的標(biāo)簽頁(yè)!!!
如何生成餅狀圖：
<svg viewBox="0 0 32 32"> <circle r="16" cx="16" cy="16" /> </svg> svg { width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 38 100; /* 可得到比率為38%的扇區(qū) */ }單側(cè)投影：
box-shadow: 0 5px 4px -4px black; -4px black;解決方案來(lái)自box-shadow 鮮為人知的第四個(gè)長(zhǎng)度參數(shù)。它排在模糊半徑參數(shù)之后，稱作擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或（當(dāng)指定負(fù)值時(shí)）縮小投影的尺寸。
鄰邊投影：<舉例來(lái)說(shuō)，把一個(gè)black、6px 的投影設(shè)置到右側(cè)和底部可以這樣做：>
box-shadow: 3px 3px 6px -3px black;雙側(cè)投影：
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;毛玻璃效果：<效果如下圖>
<main> <blockquote> "The only way to get rid of a temptation[...]" <footer><cite>Oscar Wilde,The Picture of Dorian Gray</cite></footer> </blockquote> </main> body, main::before {background: url("tiger.jpg") 0 / cover fixed;} main {position: relative;background: hsla(0,0%,100%,.3);overflow: hidden;} main::before {content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;filter: blur(20px);margin: -30px;}某元素偽元素后面添加換行符：
XX::after {content: "\A";}插入換行：
<dl> <dt>Name:</dt> <dd>Lea Verou</dd> <dt>Email:</dt> <dd>lea@verou.me</dd> <dt>Location:</dt> <dd>Earth</dd> </dl> dd + dt::before {content: '\A';white-space: pre;} dd + dd::before {content: ', ';margin-left: -.25em;font-weight: normal;}文本行的斑馬條紋：
padding: .5em; line-height: 1.5; background: beige; background-size: auto 3em; background-origin: content-box; background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);這個(gè)方法總體來(lái)說(shuō)是十分靈活的，唯一可能破壞效果的情況可能就是在改變line-height 時(shí)忘了相應(yīng)地調(diào)整background-size。background-size 需要設(shè)置為line-height 的兩倍，因?yàn)槊總€(gè)背景貼片需要覆蓋兩行代碼。
我們通常使用<pre> 和<code> 元素來(lái)顯示代碼，它們具有瀏覽器所賦予的默認(rèn)樣式：
pre, code {font-family: monospace;} pre {display: block;margin: 1em 0;white-space: pre;tab-size: 2;} tab-size: 2;}tab-size: 2;用于設(shè)置縮進(jìn)2個(gè)字符的寬度！
華麗的 & 符號(hào)：
@font-face規(guī)則中src描述符還可以接local()函數(shù),Italic表示斜體！
@font-face { font-family: Ampersand; src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Palatino-Italic'), local('BookAntiqua-Italic'); unicode-range: U+26; } h1 { font-family: Ampersand, Helvetica, sans-serif; }你還可以舉一反三用不同的的字體體來(lái)美化化數(shù)字、符號(hào)、標(biāo)點(diǎn)等。各種創(chuàng)意完全停不下來(lái)！
虛線下劃線：
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x; background-size: .2em 2px; background-position: 0 1em;通過(guò)色標(biāo)的百分比位置值來(lái)微調(diào)虛線的虛實(shí)比例，通過(guò)background-size 來(lái)改變虛線的疏密。
凸版印刷效果：
在擬物化風(fēng)格的網(wǎng)頁(yè)中，凸版印刷效果是最流行的文字美化手法之一。
這種效果尤其適用于中等亮度背景配上深色文字的場(chǎng)景但它也可用于深色底、淺色字的場(chǎng)景，只要文字不是黑色并且背景不是純黑或純白就行。
background: hsl(210, 13%, 40%); color: hsl(210, 13%, 75%); text-shadow: 0 -1px 1px black;空心字效果：
<h1><svg width="2em" height="1.2em"> <use xlink:href="#css" /> <text id="css" y="1em">CSS</text> </svg></h1> h1 {font: 500%/1 Rockwell, serif;background: deeppink;color: white;} h1 text {fill: currentColor;} h1 svg { overflow: visible } h1 use {stroke: black;stroke-width: 6;stroke-linejoin: round;}文字外發(fā)光效果：<文字外發(fā)光效果常用于凸顯標(biāo)題，或給鏈接添加鼠標(biāo)懸停效果>
a {background: #203;color: white;transition: 1s;} a:hover {color: transparent;text-shadow: 0 0 .1em, 0 0 .3em;}文字凸起效果：
background: #58a; color: white; text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;或：
color: white; background: hsl(0,50%,45%); text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;用戶體驗(yàn)-鼠標(biāo)光標(biāo)的用法：<eq:cursor:pointer;>
擴(kuò)大可點(diǎn)擊區(qū)域：
border: 10px solid transparent;自定義復(fù)選框：
<input type="checkbox" id="awesome" /> <label for="awesome">Awesome!</label> input[type="checkbox"] + label::before {content: '\a0'; /* 不換行空格 */display: inline-block;vertical-align: .2em;width: .8em;height: .8em;margin-right: .2em;border-radius: .2em;background: silver;text-indent: .15em;line-height: .65; }/*換種顏色，加勾選標(biāo)記*/ input[type="checkbox"]:checked + label::before {content: '\2713';background: yellowgreen; }/*刪除原來(lái)的勾選框*/ input[type="checkbox"] {position: absolute;clip: rect(0,0,0,0); }/*設(shè)置點(diǎn)擊樣式*/ input[type="checkbox"]:focus + label::before {box-shadow: 0 0 .1em .1em #58a; } input[type="checkbox"]:disabled + label::before {background: gray;box-shadow: none;color: #555; }開關(guān)式按鈕：
<input type="checkbox" id="awesome" /> <label typeof="button" for="awesome">Awesome!</label> input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); } input[type="checkbox"] + label { display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white; } input[type="checkbox"]:checked + label, input[type="checkbox"]:active + label { box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb; }通過(guò)陰影來(lái)弱化背景：
這個(gè)效果最常HTML見(jiàn)的實(shí)現(xiàn)方法就是增加一個(gè)額外元素用于遮擋背景然后為它添加如下樣式：
.overlay { /* 用于遮擋背景 */position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.8); } .lightbox { /* 需要吸引用戶注意的元素 */ position: absolute; z-index: 1; /* [其余樣式] */ }.overlay 遮罩層負(fù)責(zé)把這個(gè)關(guān)鍵元素背后的所有東西調(diào)暗。.lightbox需要指定一個(gè)更高的z-index，以便繪制在遮罩層的上層。
交互式的圖片對(duì)比控件：
CSS resize 方案：
<div class="image-slider"><div><img src="test01.jpg" alt="Before" /></div><img src="test02.jpg" alt="After" /> </div> .image-slider {position:relative;display: inline-block; } .image-slider > div {position: absolute;top: 0; bottom: 0; left: 0;width: 50%;max-width: 100%;overflow: hidden;resize: horizontal; } .image-slider > div::before {content: '';position: absolute;bottom: 0; right: 0;width: 12px; height: 12px;padding: 5px;background:linear-gradient(-45deg, white 50%, transparent 0);background-clip: content-box;cursor: ew-resize; } .image-slider img {display: block;user-select: none; }自適應(yīng)內(nèi)部元素：
<figure> <img src="adamcatlace.jpg" /> <figcaption> The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. </figcaption> </figure> figure {max-width: 300px;/*提供回退樣式*/ max-width: min-content;margin: auto;} figure > img { max-width: inherit; } max-width: 300px;/*提供回退樣式*/ max-width: min-content;margin: auto;} figure > img { max-width: inherit; }精確控制表格列寬：
<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr> </table> table {table-layout: fixed;width: 100%;}滿幅的背景，定寬的內(nèi)容：
<footer><div class="wrapper"><!-- 頁(yè)腳的內(nèi)容寫在這里 --></div> </footer> footer {padding: 1em;/*提供回退樣式*/padding: 1em calc(50% - 450px);background: #333; }垂直居中：
在CSS 中對(duì)元素進(jìn)行水平居中是非常簡(jiǎn)單的：如果它是一個(gè)行內(nèi)元素，就對(duì)它的父元素應(yīng)用text-align: center；如果它是一個(gè)塊級(jí)元素，就對(duì)它自身應(yīng)用margin: auto。
<main><h1>Am I centered yet?</h1><p>Center me, please!</p> </main>把寬高固定的元素放置大視口的正中心<方法1>：
main {position: absolute;top: 50%;left: 50%; margin-top: -3em; /* 6/2 = 3 */ margin-left: -9em; /* 18/2 = 9 */ width: 18em;height: 6em;}把寬高固定的元素放置大視口的正中心<方法2>：
main {position: absolute;top: calc(50% - 3em);left: calc(50% - 9em);width: 18em;height: 6em;}把任意寬高的元素放置大視口的正中心：
main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}基于視口單位的垂直居中：
視口相關(guān)的長(zhǎng)度單位
vw 是與視口寬度相關(guān)的。與常人的直覺(jué)不符的是，1vw 實(shí)際上表示
視口寬度的1%，而不是100%。
與 vw類似，1vh表示視口高度的 1%。
當(dāng)視口寬度小于高度時(shí)，1vmin等于 1vw，否則等于 1vh。
當(dāng)視口寬度大于高度時(shí)，1vmax等于 1vw，否則等于 1vh。
基于Flexbox 的解決方案：<完美>
<XX><main><h1>Am I centered yet?</h1><p>Center me, please!</p></main> </XX>先給這個(gè)待居中元素的父元素設(shè)display:flex;
XX{display: flex;min-height: 100vh;margin: 0;} main {margin: auto;}緊貼底部的頁(yè)腳<固定高度的解決方案>：
<div id="wrapper"> <header><h1>Site name</h1> </header> <main><p>Bacon Ipsum dolor sit amet...<!-- 從baconipsum.com那里復(fù)制一些示意文字過(guò)來(lái) --></p> </main> </div> <footer><p>? 2015 No rights reserved.</p><p>Made with ? by an anonymous pastafarian.</p> </footer> #wrapper {min-height: calc(100vh - 7em);}7em);}2 行× 行高+3× 段落的垂直外邊距+ 頁(yè)腳的垂直內(nèi)邊距=2×1.5em+3×1em+1em=7em
緊貼底部的頁(yè)腳<更靈活的解決方案>：
完全不需要復(fù)雜的計(jì)算或是添加多余的HTML 元素等
<header><h1>Site name</h1> </header> <main><p>Bacon Ipsum dolor sit amet...<!-- 從baconipsum.com那里復(fù)制一些示意文字過(guò)來(lái) --></p> </main> <footer><p>? 2015 No rights reserved.</p><p>Made with ? by an anonymous pastafarian.</p> </footer> body {display: flex;flex-flow: column;min-height: 100vh;} main { flex: 1; }過(guò)渡與動(dòng)畫：
彈性過(guò)渡提示框：<谷歌不可用，已測(cè)IE下可用>
<label>Your username:<input id="username" /><span class="callout">Only letters, numbers,underscores (_) and hyphens (-) allowed!</span></label> input:not(:focus) + .callout {transform: scale(0);transition: .25s transform; } .callout {transform-origin: 1.4em -.4em;transition: .5s cubic-bezier(.25,.1,.3,1.5) transform; }逐幀動(dòng)畫：
用JavaScript 在瀏覽器中實(shí)現(xiàn)靈活的逐幀動(dòng)畫，比如用一張拼合圖片（image sprite）作為背景，然后用JavaScript 動(dòng)態(tài)地控制它的background-position。<復(fù)雜，暫時(shí)不考慮>
<div class="loader">Loading...</div> @keyframes loader {to { background-position: -1378px 0; }}.loader {width: 173px; height: 173px;background: url(CSS.jpg) 0 0;animation: loader 1s infinite steps(8);/* 把文本隱藏起來(lái) */text-indent: 200%;white-space: nowrap;overflow: hidden;}寬高173px為單幀的尺寸，-1378px是整個(gè)拼合圖片的長(zhǎng)度！
打字動(dòng)畫：
<h1>CSS is awesome!</h1> @keyframes typing {from { width: 0; }} h1 {width: 15ch; /* 文本的寬度 */overflow: hidden;white-space: nowrap;animation: typing 6s steps(15);}width:15ch;為文本的長(zhǎng)度，瀏覽器是否支ch單位會(huì)決定最終的顯示效果！
鼠標(biāo)懸浮長(zhǎng)方形的圖片從左到右自動(dòng)播放，鼠標(biāo)移開播放暫停：
<div class="panoramic"></div> @keyframes panoramic {to { background-position: 100% 0; } } .panoramic {width: 150px; height: 150px;background: url("img/naxos-greece.jpg");background-size: auto 100%;animation: panoramic 10s linear infinite alternate;animation-play-state: paused; } .panoramic:hover, .panoramic:focus {animation-play-state: running;}width: 150px; height: 150px;表示當(dāng)前圖片要顯示的大小！
沿環(huán)形路徑平移的動(dòng)畫：<圖片本身也會(huì)跟著轉(zhuǎn)動(dòng)>
<div class="path"><img src="yuan.png" class="avatar" /> </div> @keyframes spin {to { transform: rotate(1turn); }}.avatar {position: absolute;animation: spin 3s infinite linear;transform-origin: 50% 150px; /* 150px = 路徑的半徑 */right: 118px;/*圖片本身為64*64，118=150-64/2*/} .path{width: 300px;height: 300px;border-radius: 150px;background: aqua;position: relative;}
沿環(huán)形路徑平移的動(dòng)畫<圖片本身不跟著轉(zhuǎn)動(dòng)>：
END
總結(jié)
以上是生活随笔為你收集整理的CSS 样式修改技巧及心得汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
