在有些做項(xiàng)目項(xiàng)目中，需要用戶自定義組件的CSS樣式并即時(shí)改變組件樣式狀態(tài)。
羅山網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
1. 增加 style樣式
2. 更新 style樣式
3. 刪除 style樣式
4.其他使用方式
網(wǎng)頁(yè)的動(dòng)態(tài)效果你說(shuō)的這里的動(dòng)態(tài)效果是讓一個(gè)畫面或者文字動(dòng)一下吧？因?yàn)樵趯I(yè)里邊動(dòng)態(tài)是與數(shù)據(jù)庫(kù)連接的后臺(tái)的技術(shù)。
css是層疊樣式表，是不能夠?qū)崿F(xiàn)動(dòng)態(tài)效果的。但是可以讓某個(gè)畫面動(dòng)，比如：
一個(gè)文字點(diǎn)擊的時(shí)候，變大的css代碼為：
a{font-size:12px;}??????/*這里文字默認(rèn)大小是12像素*/
a:hover{font-size:14px;}??????/*這里鼠標(biāo)經(jīng)過(guò)大小是14像素*/
上邊這個(gè)簡(jiǎn)單的代碼就實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)a的時(shí)候，文字變大，離開又恢復(fù)。
希望能幫到你
html結(jié)構(gòu)如下：
div class="wrap"
div class="circle"/div
div class="top"/div
div class="bottom"/div
/div
實(shí)現(xiàn)的思路就是：
1. 首先定義外層容器大小，本例采用200x200，
.wrap{
position: relative;
width: 200px;
height: 200px;
}
2. 通過(guò)border-radius畫一個(gè)圓環(huán)，這個(gè)比較簡(jiǎn)單
.circle{
height: 100%;
box-sizing: border-box;
border: 20px solid red;
border-radius: 50%;
}
效果如下：
2. 然后用上下兩層擋板遮住這個(gè)圓環(huán)，通過(guò)旋轉(zhuǎn)擋板將圓環(huán)慢慢露出，過(guò)程如下圖所示：
通過(guò)將下層擋板旋轉(zhuǎn)180deg就能夠?qū)崿F(xiàn)將下半圓慢慢畫出的效果，畫完以后就需要將其隱藏起來(lái)，那該如何實(shí)現(xiàn)呢？
這里我用了opacity這個(gè)屬性，當(dāng)100%時(shí)將其設(shè)置為0，同時(shí)設(shè)置animation-fill-mode: forwards;這樣就隱藏了
0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}
3. 那如何顯示上半圓呢？同樣的思路我們對(duì)上面擋板進(jìn)行旋轉(zhuǎn)，通過(guò)實(shí)際效果我們可以看到，雖然上半圓露出來(lái)了，但是確把下半圓給遮擋了。
如何解決這個(gè)問(wèn)題呢？
我們可以在下半圓和擋板間再放一個(gè)半圓，同時(shí)設(shè)置他們的z-index，讓上面的擋板旋轉(zhuǎn)時(shí)被下半圓遮住，這樣就可以了。
說(shuō)的有些復(fù)雜，相當(dāng)于我們現(xiàn)在有四個(gè)元素：上擋板，下?lián)醢?，底部的大圓環(huán)，一個(gè)處在下?lián)醢搴痛髨A環(huán)間的半圓。
它們的z-index如下：
上擋板：1
下?lián)醢搴偷撞康拇髨A間的半圓：2
下?lián)醢澹?
為了不增加額外的元素，下?lián)醢搴偷撞康拇髨A間的半圓我們通過(guò)偽元素來(lái)實(shí)現(xiàn)
.circle:before{
content: '';
position: absolute;
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
top: 50%;
left: 0;
border: 20px solid red;
border-top: transparent;
border-radius: 0 0 50% 50%/ 0 0 100% 100%;
z-index: 2;
}
4. 組后再結(jié)合css3的transform動(dòng)畫就可以了，需要注意的是，上擋板和下?lián)醢鍎?dòng)畫是同時(shí)開始了，所以上擋板的動(dòng)畫要設(shè)置一個(gè)延時(shí)，時(shí)長(zhǎng)就是下?lián)醢鍎?dòng)畫的時(shí)長(zhǎng)
本例用到的知識(shí)點(diǎn)如下：
1. 如何畫一個(gè)圓環(huán)
2. 如何畫一個(gè)半圓
3. css3動(dòng)畫
4. 定位
最終代碼如下：
!DOCTYPE html
html
head
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
meta http-equiv="content-type" content="text/html;charset=utf-8"
title動(dòng)態(tài)畫一個(gè)圓環(huán)/title
style
*{
margin: 0; padding: 0;
}
.wrap{
position: relative;
width: 200px;
height: 200px;
}
.circle{
height: 100%;
box-sizing: border-box;
border: 20px solid red;
border-radius: 50%;
}
.circle:before{
content: '';
position: absolute;
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
top: 50%;
left: 0;
border: 20px solid red;
border-top: transparent;
border-radius: 0 0 50% 50%/ 0 0 100% 100%;
z-index: 2;
}
.top, .bottom{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
box-sizing: border-box;
background: white;
}
.top{
top: 0;
z-index: 1;
transform-origin: center bottom;
animation: 1s back-half linear 1s;
animation-fill-mode: forwards;
}
.bottom{
z-index: 3;
top: 50%;
transform-origin: center top;
animation: 1s front-half linear;
animation-fill-mode: forwards;
}
@keyframes front-half{
0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}
}
@keyframes back-half{
0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}
}
/style
/head
body
div class="wrap"
div class="circle"/div
div class="top"/div
div class="bottom"/div
/div
/body
/html
陰影: 通過(guò)合理添加陰影可以使平面網(wǎng)頁(yè)內(nèi)容顯示出立體的效果
1、 box-shadow：盒子陰影
(1) 陰影在x軸方向的偏移, 正右負(fù)左
(2) 陰影在y軸方向的偏移, 正下負(fù)上
(3) 陰影的模糊度, 數(shù)值越大, 陰影越模糊
(4) 陰影的范圍, 數(shù)值越大, 陰影越大
(5) 陰影顏色
(6) 陰影位置, 默認(rèn)outset盒子外陰影, inset盒子內(nèi)陰影
2、 text-shadow：文字陰影
(1) 陰影x軸偏移
(2) 陰影y軸偏移
(3) 陰影模糊度
(4) 陰影顏色
文字陰影不能像盒子陰影一樣疊加陰影。
可以通過(guò)漸變?yōu)闃?biāo)簽設(shè)置一定梯度變化的背景色
漸變色只能給標(biāo)簽的background-image樣式賦值。
1、線性漸變： -webkit-linear-gradient
1) 線性的角度或方向, 默認(rèn)從上到下漸變
(1) left / right / top / bottom 設(shè)置漸變的開始方向
(2) 角度的設(shè)置, 單位deg, 0deg在3點(diǎn)鐘方向, 正角度逆時(shí)針旋轉(zhuǎn), 負(fù)角度順時(shí)針旋轉(zhuǎn)。
2) 漸變的顏色和階段, 如果不設(shè)置階段, 各個(gè)自動(dòng)平分
2、徑向漸變, 以圓心向四周沿著半徑方向漸變：-webkit-radial-gradient
(1) 設(shè)置圓的類型, 默認(rèn)橢圓, 可以設(shè)置circle
(2) 設(shè)置顏色及階段
倒影：通過(guò)-webkit-box-reflect 來(lái)為標(biāo)簽設(shè)置倒影
(1) 設(shè)置倒影方向
above: 倒影出現(xiàn)在標(biāo)簽的上方
below: 倒影出現(xiàn)在標(biāo)簽的下方
left: 倒影出現(xiàn)在標(biāo)簽的左方
right: 倒影出現(xiàn)在標(biāo)簽的右方
(2) 設(shè)置倒影距離
(3) 設(shè)置蒙版圖片, 可以設(shè)置漸變
倒影目前只在 Chrome 和 Safari 瀏覽器生效
過(guò)渡動(dòng)畫效果: 將標(biāo)簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動(dòng)畫。
1）transition-property: 設(shè)置過(guò)渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來(lái)設(shè)置所有樣式變化都用過(guò)渡顯示。
2）transition-duration: 設(shè)置過(guò)渡的持續(xù)時(shí)間。
3）transition-delay: 設(shè)置過(guò)渡效果的延遲時(shí)間。
4）transition-timing-function: 設(shè)置過(guò)渡的速度曲線。
過(guò)渡效果，可以簡(jiǎn)寫，用空格可空開過(guò)渡樣式的各個(gè)值，不分先后，當(dāng)存在兩個(gè)時(shí)間時(shí)，第一個(gè)為過(guò)渡持續(xù)時(shí)間，第二個(gè)為過(guò)渡延遲時(shí)間。
可以設(shè)置的值:
（1）ease: 先快后慢
（2）ease-in: 加速
（3）ease-out: 減速
（4）ease-in-out: 先加速后減速
（5）linear: 勻速
1、2d變換：
通過(guò) transform 來(lái)為標(biāo)簽設(shè)置變換
1） 平移變換 translate
translateX():設(shè)置標(biāo)簽沿著x軸移動(dòng)的距離
translateY():設(shè)置標(biāo)簽沿著y軸移動(dòng)的距離
translate():設(shè)置標(biāo)簽沿著xy軸的移動(dòng)距離，第一個(gè)值表示x軸平移，第二個(gè)值表示y軸平移
x軸水平向右為正方向，y軸向下為正方向
平移會(huì)保留標(biāo)簽原本位置，相對(duì)自身原本位置平移
2） 旋轉(zhuǎn)變換 rotate
默認(rèn)旋轉(zhuǎn)點(diǎn)在標(biāo)簽的正中心，正角度使標(biāo)簽沿著順時(shí)針旋轉(zhuǎn)，負(fù)角度使標(biāo)簽沿著逆時(shí)針旋轉(zhuǎn)。
0deg方向是12點(diǎn)方向。
旋轉(zhuǎn)點(diǎn)又是標(biāo)簽變換的坐標(biāo)系原點(diǎn)
3）縮放變換 scale
scaleX()、scaleY()、scale()
縮放變換，放大縮小的是標(biāo)簽坐標(biāo)系的比例，例如，放大2倍，坐標(biāo)系中1px就變成了2px；注意，一旦坐標(biāo)系比例發(fā)生變化，會(huì)影響其他變換，例如：平移變換100px在2倍坐標(biāo)系下，就會(huì)平移200px。
transform-origin 設(shè)置標(biāo)簽變換參照點(diǎn)位置:
（1）left/right/top/bottom/center來(lái)設(shè)置特殊位置
（2）通過(guò)具體像素精確設(shè)置位置
第一個(gè)值表示x軸方向?qū)⒄拯c(diǎn)位置的設(shè)置
第二個(gè)值表示y軸方向?qū)⒄拯c(diǎn)位置的設(shè)置
允許變換參照點(diǎn)設(shè)置在標(biāo)簽之外
注意，一旦為標(biāo)簽更改變換參照點(diǎn)，那么變換參照點(diǎn)的基準(zhǔn)就變成了標(biāo)簽左上角為原點(diǎn)。
2d的變換總結(jié)：
（1）默認(rèn)變換參照點(diǎn)在標(biāo)簽的正中心，x軸為穿過(guò)參照點(diǎn)水平軸，向右為正，y軸是穿過(guò)參照點(diǎn)豎直軸，向下為正。
（2）平移、旋轉(zhuǎn)、縮放都會(huì)改變標(biāo)簽坐標(biāo)系的狀態(tài)。
（3）變換都是參照標(biāo)簽初始位置進(jìn)行變換。
2、3D變換
設(shè)置3d變換 ：
設(shè)置視距：
（1）和2d變換相似，只是在2d變換平面的基礎(chǔ)上，多出了一條，垂直于標(biāo)簽平面并默認(rèn)向外為正的z軸。
（2）3d變換需要為變換標(biāo)簽的父標(biāo)簽設(shè)置變換類型為3d，相當(dāng)于在該標(biāo)簽下生成了一塊3d空間。
（3）3d變換下，只有平移和旋轉(zhuǎn)變換，沒(méi)有縮放。
（4）3d變換中, 可以通過(guò)改變標(biāo)簽變換參照點(diǎn)位置來(lái)改變XYZ軸的位置
1、 animation動(dòng)畫，配合@keyframes來(lái)為標(biāo)簽設(shè)置關(guān)鍵幀動(dòng)畫
animation屬性值：
1）animation-name：動(dòng)畫名稱，用于為動(dòng)畫綁定關(guān)鍵幀
@keyframes后面的名稱
2）animation-duration：動(dòng)畫播放時(shí)間
s為單位，時(shí)間為0無(wú)動(dòng)畫過(guò)程
3）animation-delay：動(dòng)畫延遲時(shí)間
s為單位，時(shí)間為0無(wú)延遲
4）animation-timing-function：動(dòng)畫緩動(dòng)效果
可以設(shè)置的值：
（1）ease
（2）ease-in
（3）ease-out
（4）ease-in-out
（5）linear
5）animation-direction：設(shè)置動(dòng)畫方向
alternate，當(dāng)播放次數(shù)大于一，返向播放
6）animation-iteration-count：設(shè)置動(dòng)畫播放次數(shù)
infinite，無(wú)限播放
7）animation-fill-mode：設(shè)置動(dòng)畫結(jié)束位置
默認(rèn) backwards，回到初始位置
forwards，停在結(jié)束位置
注意： animation同樣存在簡(jiǎn)寫，將樣式值以空格隔開，不區(qū)分先后，兩個(gè)時(shí)間同時(shí)出現(xiàn)，第一個(gè)為播放時(shí)間，第二個(gè)為延遲時(shí)間。
一些css3樣式只在部分瀏覽器生效, 可以通過(guò)添加兼容前綴的形式來(lái)對(duì)部分低版本瀏覽器兼容
例如: transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
兼容問(wèn)題：
-webkit- chrome、safari
-moz- firefox
-o- opera
-ms- ie
nimation、transition、transform、gradient等css3樣式都應(yīng)添加前綴進(jìn)行多類型多版本瀏覽器兼容。
重慶分公司
重慶分公司
