建站
咨詢
售后
建站咨詢
新聞中心
5、CSS樣式之動畫效果
陰影: 通過合理添加陰影可以使平面網(wǎng)頁內容顯示出立體的效果
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供邵原網(wǎng)站建設、邵原做網(wǎng)站、邵原網(wǎng)站設計、邵原網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、邵原企業(yè)網(wǎng)站模板建站服務，10年邵原做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。
1、 box-shadow：盒子陰影
(1) 陰影在x軸方向的偏移, 正右負左
(2) 陰影在y軸方向的偏移, 正下負上
(3) 陰影的模糊度, 數(shù)值越大, 陰影越模糊
(4) 陰影的范圍, 數(shù)值越大, 陰影越大
(5) 陰影顏色
(6) 陰影位置, 默認outset盒子外陰影, inset盒子內陰影
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點鐘方向, 正角度逆時針旋轉, 負角度順時針旋轉。
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） 旋轉變換 rotate
默認旋轉點在標簽的正中心，正角度使標簽沿著順時針旋轉，負角度使標簽沿著逆時針旋轉。
0deg方向是12點方向。
旋轉點又是標簽變換的坐標系原點
3）縮放變換 scale
scaleX()、scaleY()、scale()
縮放變換，放大縮小的是標簽坐標系的比例，例如，放大2倍，坐標系中1px就變成了2px；注意，一旦坐標系比例發(fā)生變化，會影響其他變換，例如：平移變換100px在2倍坐標系下，就會平移200px。
transform-origin 設置標簽變換參照點位置:
（1）left/right/top/bottom/center來設置特殊位置
（2）通過具體像素精確設置位置
第一個值表示x軸方向對參照點位置的設置
第二個值表示y軸方向對參照點位置的設置
允許變換參照點設置在標簽之外
注意，一旦為標簽更改變換參照點，那么變換參照點的基準就變成了標簽左上角為原點。
2d的變換總結：
（1）默認變換參照點在標簽的正中心，x軸為穿過參照點水平軸，向右為正，y軸是穿過參照點豎直軸，向下為正。
（2）平移、旋轉、縮放都會改變標簽坐標系的狀態(tài)。
（3）變換都是參照標簽初始位置進行變換。
2、3D變換
設置3d變換 ：
設置視距：
（1）和2d變換相似，只是在2d變換平面的基礎上，多出了一條，垂直于標簽平面并默認向外為正的z軸。
（2）3d變換需要為變換標簽的父標簽設置變換類型為3d，相當于在該標簽下生成了一塊3d空間。
（3）3d變換下，只有平移和旋轉變換，沒有縮放。
（4）3d變換中, 可以通過改變標簽變換參照點位置來改變XYZ軸的位置
1、 animation動畫，配合@keyframes來為標簽設置關鍵幀動畫
animation屬性值：
1）animation-name：動畫名稱，用于為動畫綁定關鍵幀
@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：設置動畫結束位置
默認 backwards，回到初始位置
forwards，停在結束位置
注意： 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樣式文本的虛化效果怎么做?
文本虛擬化效果可以通過css的text-shadow來實現(xiàn)。
text-shadow語法:
text-shadow ： none | length none | [shadow, ] * shadow 或none | color [, color ]*
也就是：
text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]...
或者
text-shadow:[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)],[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)].
例子：
.demo {background: #666666;width: 440px;padding: 30px; font: bold 55px/100% "微軟雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;color: #fff;text-transform: uppercase;}
CSS樣式如何設置圖片立體效果
能否說得詳細一點，什么叫立體效果的背景圖片？ 非要通過css設置，就只能設置左邊和頂邊的邊框為淺色模擬高光，右邊和底邊的邊框為深色模擬陰影來做立體效果。如果要復雜一些的立體效果，你就必須通過圖片來做了，使用繪圖軟件繪制一個立體效果的按鈕，然后設為按鈕背景即可
css樣式怎樣做出下面的效果
style
ul,li{padding:0;margin:0;list-style:none;}
ul?{
width:220px;
height:30px;
}
ulli{
display:block;
width:70px;
height:30px;
line-height:30px;
float:left;
font-size:12px;
text-align:center;
border:1px?solid?rgb(225,30,100);
}
ulli:first-child{
background:rgb(225,30,100);
color:#ffffff;
-moz-border-radius:5px?0?0?5px;??????/*?Gecko?browsers?*/
-webkit-border-radius:5px?0?0?5px;???/*?Webkit?browsers?*/
border-radius:5px?0?0?5px;???????????/*?W3C?syntax?*/
}
ulli:last-child{
-moz-border-radius:0?5px?5px?0;??????/*?Gecko?browsers?*/
-webkit-border-radius:0?5px?5px?0;????/*?Webkit?browsers?*/
border-radius:0?5px?5px?0;????????????/*?W3C?syntax?*/
}
ulli:nth-child(2){
border-left:none;
border-right:none;
}
/style
ul
li最熱/li
li最新/li
li熱銷/li
/ul
這是CSS3的，，，因為圓角，是CSS3的新屬性，，
如何css制作3d旋轉立方體效果？
具體步驟如下：
一、立方體結構中，使用一個wrapper div來包裹立方體。在里面使用6個div來制作立方體的6個面。
二、立方體的每一個面都有它自己的元素。我們稍后會使用CSS來將立方體的6個面放置到正確的位置上。
三、在立方體的CSS樣式中，首先要關注的是立方體的wrapper div。為了制作3D效果，我們需要為它提供一個 CSS perspective。
四、CSS perspective屬性是一個比較復雜的CSS3屬性。最好的理解它的方法是看完文檔后，自己動手修改一下DEMO中的perspective屬性來看看它的變化。
下面需要給包含立方體6個面的立方體的容器.cube提供樣式：
1、.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
2、給立方體容器200像素的寬度，并設置為相對定位，這樣在它里面的立方體的6個面可以設置為絕對定位。
3、preserve-3d屬性確保所有6個面都處于3D立體狀態(tài)。
4、在為6個面設置它們的位置之前，先給它們一些通用的樣式：
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
5、在進過上面對立方體6個面的一系列設置之后，現(xiàn)在我們可以為6個面制作變形效果，以使它們組裝為一個立方體。
6、rotateY的值可以旋轉立方體的各個面，使上面的文字處于正確的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移動。translateY的值看起來有些混亂，但是請記住，它的作用是通過透明的面板來使指定的面升高或降低來制作3D效果。
8、每一個面都有自己的translations值來使它們處于適當?shù)奈恢蒙稀Ｄ憧梢宰约盒薷囊幌逻@些值來看看效果。
網(wǎng)站題目：css樣式做效果,css效果大全
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/dsijjjo.html
