建站
咨詢
售后
建站咨詢
新聞中心
css實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)
做斜線運(yùn)動(dòng)
成都服務(wù)器托管，成都創(chuàng)新互聯(lián)提供包括服務(wù)器租用、綿陽電信機(jī)房、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、域名與空間等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：028-86922220
設(shè)置Y軸延時(shí)為動(dòng)畫時(shí)長(zhǎng)的一半, 運(yùn)動(dòng)軌跡變成菱形
為了看起來有立體感添加scale屬性,scale動(dòng)畫應(yīng)該是X軸和Y軸的時(shí)間總和
[img]如何用 css 畫出一個(gè)橢圓
style
#box{
width:?200px;?
height:?100px;?
background:?red;?
-moz-border-radius:?100px?/?50px;?
-webkit-border-radius:?100px?/?50px;?
border-radius:?100px?/?50px;?
}
/style
div?id="box"/div
CSS畫三角形、圓形、橢圓形總結(jié)
CSS畫正方形長(zhǎng)方形很簡(jiǎn)單，本文就不說了。
一、三角形
1、CSS畫等腰三角形
2、畫直角三角形：
二、畫圓形
注意：border-radius是width/height的一半（50%）。
畫半圓：
半圓的畫法是把高度設(shè)為寬度的一半，并且也只設(shè)置左上角和右上角的半徑，且半徑為寬度的一半。
畫四分之一圓：是把高度和寬度設(shè)置為相等，只設(shè)置一個(gè)圓角，其半徑等于高度或?qū)挾取?/p>
三、畫橢圓
斜杠前面的一組四個(gè)值分別表示四個(gè)角的水平半徑；斜杠后面的一組四個(gè)值分別表示四個(gè)角的垂直半徑。
四、平行四邊形
margin-left是為了使得平行四邊形可以全部在瀏覽器中顯示出來
五、梯形
高度為0。有寬度沒高度。
六、五邊形、六邊形
5、CSS樣式之動(dòng)畫效果
陰影: 通過合理添加陰影可以使平面網(wǎng)頁內(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) 陰影顏色
文字陰影不能像盒子陰影一樣疊加陰影。
可以通過漸變?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è)置顏色及階段
倒影：通過-webkit-box-reflect 來為標(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 瀏覽器生效
過渡動(dòng)畫效果: 將標(biāo)簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動(dòng)畫。
1）transition-property: 設(shè)置過渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來設(shè)置所有樣式變化都用過渡顯示。
2）transition-duration: 設(shè)置過渡的持續(xù)時(shí)間。
3）transition-delay: 設(shè)置過渡效果的延遲時(shí)間。
4）transition-timing-function: 設(shè)置過渡的速度曲線。
過渡效果，可以簡(jiǎn)寫，用空格可空開過渡樣式的各個(gè)值，不分先后，當(dāng)存在兩個(gè)時(shí)間時(shí)，第一個(gè)為過渡持續(xù)時(shí)間，第二個(gè)為過渡延遲時(shí)間。
可以設(shè)置的值:
（1）ease: 先快后慢
（2）ease-in: 加速
（3）ease-out: 減速
（4）ease-in-out: 先加速后減速
（5）linear: 勻速
1、2d變換：
通過 transform 來為標(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來設(shè)置特殊位置
（2）通過具體像素精確設(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軸為穿過參照點(diǎn)水平軸，向右為正，y軸是穿過參照點(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)變換，沒有縮放。
（4）3d變換中, 可以通過改變標(biāo)簽變換參照點(diǎn)位置來改變XYZ軸的位置
1、 animation動(dòng)畫，配合@keyframes來為標(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無動(dòng)畫過程
3）animation-delay：動(dòng)畫延遲時(shí)間
s為單位，時(shí)間為0無延遲
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，無限播放
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樣式只在部分瀏覽器生效, 可以通過添加兼容前綴的形式來對(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;
兼容問題：
-webkit- chrome、safari
-moz- firefox
-o- opera
-ms- ie
nimation、transition、transform、gradient等css3樣式都應(yīng)添加前綴進(jìn)行多類型多版本瀏覽器兼容。
css如何做外面是圓的里面是橢圓的
你需要用到這個(gè)屬性border-radius:0 0 0 0;
設(shè)置兩個(gè)DIV，里面的DIV比外邊的小，定義高度寬度邊框線，然后使用上面的樣式，按照border-radius:上px 右px 下px 左px;的方式來調(diào)整你的DIV，不止可以橢圓，其他形狀也可以。
還有一個(gè)方法，使用背景圖片。
用CSS 創(chuàng)建橢圓怎么弄
你可以先寫一個(gè)邊框border 然后寫border-radius:50%； 這樣是圓形的，border-radius:5px；這樣你就可以看到邊框有點(diǎn)橢圓了
名稱欄目：css樣式橢圓,css圖片設(shè)置橢圓
文章分享：http://fisionsoft.com.cn/article/dsophpg.html
