動態(tài)增加css樣式

在有些做項目項目中，需要用戶自定義組件的CSS樣式并即時改變組件樣式狀態(tài)。

羅山網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

1. 增加 style樣式

2. 更新 style樣式

3. 刪除 style樣式

4.其他使用方式

如何用css實現(xiàn)網(wǎng)頁的動態(tài)效果

網(wǎng)頁的動態(tài)效果你說的這里的動態(tài)效果是讓一個畫面或者文字動一下吧？因為在專業(yè)里邊動態(tài)是與數(shù)據(jù)庫連接的后臺的技術(shù)。

css是層疊樣式表，是不能夠?qū)崿F(xiàn)動態(tài)效果的。但是可以讓某個畫面動，比如：

一個文字點擊的時候，變大的css代碼為：

a{font-size:12px;}??????/*這里文字默認大小是12像素*/

a:hover{font-size:14px;}??????/*這里鼠標經(jīng)過大小是14像素*/

上邊這個簡單的代碼就實現(xiàn)鼠標經(jīng)過a的時候，文字變大，離開又恢復。

希望能幫到你

如何用純css實現(xiàn)一個動態(tài)畫圓環(huán)效果

html結(jié)構(gòu)如下：

div class="wrap"

div class="circle"/div

div class="top"/div

div class="bottom"/div

/div

實現(xiàn)的思路就是：

1. 首先定義外層容器大小，本例采用200x200，

.wrap{

position: relative;

width: 200px;

height: 200px;

}

2. 通過border-radius畫一個圓環(huán)，這個比較簡單

.circle{

height: 100%;

box-sizing: border-box;

border: 20px solid red;

border-radius: 50%;

}

效果如下：

2. 然后用上下兩層擋板遮住這個圓環(huán)，通過旋轉(zhuǎn)擋板將圓環(huán)慢慢露出，過程如下圖所示：

通過將下層擋板旋轉(zhuǎn)180deg就能夠?qū)崿F(xiàn)將下半圓慢慢畫出的效果，畫完以后就需要將其隱藏起來，那該如何實現(xiàn)呢？

這里我用了opacity這個屬性，當100%時將其設置為0，同時設置animation-fill-mode: forwards;這樣就隱藏了

0%{

transform: rotate( 0 );

}

99%{

transform: rotate( 180deg );

opacity: 1;

}

100%{

transform: rotate( 180deg );

opacity: 0;

}

3. 那如何顯示上半圓呢？同樣的思路我們對上面擋板進行旋轉(zhuǎn)，通過實際效果我們可以看到，雖然上半圓露出來了，但是確把下半圓給遮擋了。

如何解決這個問題呢？

我們可以在下半圓和擋板間再放一個半圓，同時設置他們的z-index，讓上面的擋板旋轉(zhuǎn)時被下半圓遮住，這樣就可以了。

說的有些復雜，相當于我們現(xiàn)在有四個元素：上擋板，下?lián)醢澹撞康拇髨A環(huán)，一個處在下?lián)醢搴痛髨A環(huán)間的半圓。

它們的z-index如下：

上擋板：1

下?lián)醢搴偷撞康拇髨A間的半圓：2

下?lián)醢澹?

為了不增加額外的元素，下?lián)醢搴偷撞康拇髨A間的半圓我們通過偽元素來實現(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動畫就可以了，需要注意的是，上擋板和下?lián)醢鍎赢嬍峭瑫r開始了，所以上擋板的動畫要設置一個延時，時長就是下?lián)醢鍎赢嫷臅r長

本例用到的知識點如下：

1. 如何畫一個圓環(huán)

2. 如何畫一個半圓

3. css3動畫

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動態(tài)畫一個圓環(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

5、CSS樣式之動畫效果

陰影: 通過合理添加陰影可以使平面網(wǎng)頁內(nèi)容顯示出立體的效果

1、 box-shadow：盒子陰影

(1) 陰影在x軸方向的偏移, 正右負左

(2) 陰影在y軸方向的偏移, 正下負上

(3) 陰影的模糊度, 數(shù)值越大, 陰影越模糊

(4) 陰影的范圍, 數(shù)值越大, 陰影越大

(5) 陰影顏色

(6) 陰影位置, 默認outset盒子外陰影, inset盒子內(nèi)陰影

2、 text-shadow：文字陰影

(1) 陰影x軸偏移

(2) 陰影y軸偏移

(3) 陰影模糊度

(4) 陰影顏色

文字陰影不能像盒子陰影一樣疊加陰影。

可以通過漸變?yōu)闃撕炘O置一定梯度變化的背景色

漸變色只能給標簽的background-image樣式賦值。

1、線性漸變： -webkit-linear-gradient

1) 線性的角度或方向, 默認從上到下漸變

(1) left / right / top / bottom 設置漸變的開始方向

(2) 角度的設置, 單位deg, 0deg在3點鐘方向, 正角度逆時針旋轉(zhuǎn), 負角度順時針旋轉(zhuǎn)。

2) 漸變的顏色和階段, 如果不設置階段, 各個自動平分

2、徑向漸變, 以圓心向四周沿著半徑方向漸變：-webkit-radial-gradient

(1) 設置圓的類型, 默認橢圓, 可以設置circle

(2) 設置顏色及階段

倒影：通過-webkit-box-reflect 來為標簽設置倒影

(1) 設置倒影方向

above: 倒影出現(xiàn)在標簽的上方

below: 倒影出現(xiàn)在標簽的下方

left: 倒影出現(xiàn)在標簽的左方

right: 倒影出現(xiàn)在標簽的右方

(2) 設置倒影距離

(3) 設置蒙版圖片, 可以設置漸變

倒影目前只在 Chrome 和 Safari 瀏覽器生效

過渡動畫效果: 將標簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動畫。

1）transition-property: 設置過渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來設置所有樣式變化都用過渡顯示。

2）transition-duration: 設置過渡的持續(xù)時間。

3）transition-delay: 設置過渡效果的延遲時間。

4）transition-timing-function: 設置過渡的速度曲線。

過渡效果，可以簡寫，用空格可空開過渡樣式的各個值，不分先后，當存在兩個時間時，第一個為過渡持續(xù)時間，第二個為過渡延遲時間。

可以設置的值:

（1）ease: 先快后慢

（2）ease-in: 加速

（3）ease-out: 減速

（4）ease-in-out: 先加速后減速

（5）linear: 勻速

1、2d變換：

通過 transform 來為標簽設置變換

1） 平移變換 translate

translateX():設置標簽沿著x軸移動的距離

translateY():設置標簽沿著y軸移動的距離

translate():設置標簽沿著xy軸的移動距離，第一個值表示x軸平移，第二個值表示y軸平移

x軸水平向右為正方向，y軸向下為正方向

平移會保留標簽原本位置，相對自身原本位置平移

2） 旋轉(zhuǎn)變換 rotate

默認旋轉(zhuǎn)點在標簽的正中心，正角度使標簽沿著順時針旋轉(zhuǎn)，負角度使標簽沿著逆時針旋轉(zhuǎn)。

0deg方向是12點方向。

旋轉(zhuǎn)點又是標簽變換的坐標系原點

3）縮放變換 scale

scaleX()、scaleY()、scale()

縮放變換，放大縮小的是標簽坐標系的比例，例如，放大2倍，坐標系中1px就變成了2px；注意，一旦坐標系比例發(fā)生變化，會影響其他變換，例如：平移變換100px在2倍坐標系下，就會平移200px。

transform-origin 設置標簽變換參照點位置:

（1）left/right/top/bottom/center來設置特殊位置

（2）通過具體像素精確設置位置

第一個值表示x軸方向?qū)⒄拯c位置的設置

第二個值表示y軸方向?qū)⒄拯c位置的設置

允許變換參照點設置在標簽之外

注意，一旦為標簽更改變換參照點，那么變換參照點的基準就變成了標簽左上角為原點。

2d的變換總結(jié)：

（1）默認變換參照點在標簽的正中心，x軸為穿過參照點水平軸，向右為正，y軸是穿過參照點豎直軸，向下為正。

（2）平移、旋轉(zhuǎn)、縮放都會改變標簽坐標系的狀態(tài)。

（3）變換都是參照標簽初始位置進行變換。

2、3D變換

設置3d變換 ：

設置視距：

（1）和2d變換相似，只是在2d變換平面的基礎(chǔ)上，多出了一條，垂直于標簽平面并默認向外為正的z軸。

（2）3d變換需要為變換標簽的父標簽設置變換類型為3d，相當于在該標簽下生成了一塊3d空間。

（3）3d變換下，只有平移和旋轉(zhuǎn)變換，沒有縮放。

（4）3d變換中, 可以通過改變標簽變換參照點位置來改變XYZ軸的位置

1、 animation動畫，配合@keyframes來為標簽設置關(guān)鍵幀動畫

animation屬性值：

1）animation-name：動畫名稱，用于為動畫綁定關(guān)鍵幀

@keyframes后面的名稱

2）animation-duration：動畫播放時間

s為單位，時間為0無動畫過程

3）animation-delay：動畫延遲時間

s為單位，時間為0無延遲

4）animation-timing-function：動畫緩動效果

可以設置的值：

（1）ease

（2）ease-in

（3）ease-out

（4）ease-in-out

（5）linear

5）animation-direction：設置動畫方向

alternate，當播放次數(shù)大于一，返向播放

6）animation-iteration-count：設置動畫播放次數(shù)

infinite，無限播放

7）animation-fill-mode：設置動畫結(jié)束位置

默認 backwards，回到初始位置

forwards，停在結(jié)束位置

注意： animation同樣存在簡寫，將樣式值以空格隔開，不區(qū)分先后，兩個時間同時出現(xiàn)，第一個為播放時間，第二個為延遲時間。

一些css3樣式只在部分瀏覽器生效, 可以通過添加兼容前綴的形式來對部分低版本瀏覽器兼容

例如: transition: all 1s linear;

-webkit-transition: all 1s linear;

-moz-transition: all 1s linear;

-o-transition: all 1s linear;

-ms-transition: all 1s linear;

兼容問題：

-webkit- chrome、safari

-moz- firefox

-o- opera

-ms- ie

nimation、transition、transform、gradient等css3樣式都應添加前綴進行多類型多版本瀏覽器兼容。

本文標題：css動態(tài)樣式效果,css怎么做動態(tài)效果
文章URL：http://chinadenli.net/article36/dsggdsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)建站、外貿(mào)網(wǎng)站建設、網(wǎng)站改版、定制開發(fā)、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)