CSS3筆記

notebin 發(fā)布于2019-08-29 13:54 / 876人閱讀

摘要：隱藏表單寬高設(shè)為祖先元素隱藏或在頁(yè)面外默認(rèn)所有屬性都將獲得過(guò)渡效果。這個(gè)屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。背景裁剪到內(nèi)容區(qū)外沿。

HTML隱藏

display:none;
表單　　type=”hidden”
寬高設(shè)為0　　height:0;width:0;
祖先元素隱藏或在頁(yè)面外　　margin
Visibility:hidden;
Opacity:0;

box-shadow

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: h-shadow v-shadow blur spread color inset/outset;
默認(rèn)outset

transition

transition:
all  #所有屬性都將獲得過(guò)渡效果。
property    #定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔
transition-duration  #規(guī)定完成過(guò)渡效果需要多少秒或毫秒
transition-timing-function  #規(guī)定速度效果的速度曲線
                inear    #規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果
                ease    #規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果
                ease-in  #規(guī)定以慢速開(kāi)始的過(guò)渡效果
                ease-out  #規(guī)定以慢速結(jié)束的過(guò)渡效果
               ease-in-out  #規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果
transition-delay    #定義過(guò)渡效果何時(shí)開(kāi)始。
transform-origin: x-axis y-axis z-axis;    #設(shè)置旋轉(zhuǎn)中心  

transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
transition: property duration timing-function delay;

animation

animation-name
animation-duration/*持續(xù)時(shí)間*/
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out
animation-delay /*延遲時(shí)間*/
animation-iteration-count
animation-direction :normal | altenate
animation-fill-mode: none | forwards /*當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值*/| backwards | both
animation-play-state: paused|running
 
.in {
    z-index:999;
    display: block;
    -webkit-animation: in-charlie .75s ease-out forwards .25s;
    -moz-animation: in-charlie .75s ease-out forwards .25s;
    -o-animation: in-charlie .75s ease-out forwards .25s;
    animation: in-charlie .75s ease-out forwards .25s;
    opacity: 0;
}
@-webkit-keyframes in-charlie {
    0% {
        -webkit-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-moz-keyframes in-charlie {
    0% {
        -moz-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -moz-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-o-keyframes in-charlie {
    0% {
        -o-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -o-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes in-charlie {
    0% {
        -webkit-transform: translate3d(0, 150px, 0);
        -moz-transform: translate3d(0, 150px, 0);
        -o-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

transform

{
　　transform:
　　scale3d(x,y,z) /*放大*/
　　translate3d(x,y,z) /*位置*/
　　rotate3d(x,y,z,angle) /*旋轉(zhuǎn)*/
　　skew(x-angle,y-angle) /*傾斜*/
　　transition-property /*規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱*/
}

input-placeholder

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

gradient

background-image:linear-gradient
https://developer.mozilla.org...

background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 

background: linear-gradient(top,#ccc, #000);

 

background: radial-gradient(red, yellow, rgb(30, 144, 255));
　　　　　　radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%)
　　　　　　

background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
 
 

background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);

-webkit-touch-callout

-webkit-touch-callout: none; #在iOS上，當(dāng)你觸摸并按住觸摸的目標(biāo)，比如一個(gè)鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。這個(gè)屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。

-webkit-tap-highlight-color

-webkit-tap-highlight-color: rgba(0,0,0,0); #點(diǎn)擊一個(gè)鏈接 背景顏色

user-select

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;  #禁止用戶選擇文字或圖片，內(nèi)容

filter

https://www.w3cplus.com/css3/...
https://developer.mozilla.org...

-webkit-box-reflect below | above | left | right ::-webkit-scrollbar

background-clip: border-box; // 背景延伸到邊框外沿（但是在邊框之下）
background-clip: padding-box; // 邊框下面沒(méi)有背景，即背景延伸到內(nèi)邊距外沿。
background-clip: content-box; // 背景裁剪到內(nèi)容區(qū) (content-box) 外沿。
默認(rèn)值（initial），繼承（inherit）

云服務(wù)器 GPU云服務(wù)器 css3 css3氣泡 css3動(dòng)畫 JS+CSS3

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112784.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

notebin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RackNerd 美國(guó)勞工節(jié)促銷：美國(guó)服務(wù)器，高配置，大硬盤（最高達(dá)10x1.6TB SSD），猶他

閱讀 3772·2021-09-07 10:19
OneTechCloud：易科雲(yún)月付9折季付8折，香港cn2 VPS(不限流量)，美國(guó)三網(wǎng)cn2 g

閱讀 3696·2021-09-03 10:42
還在問(wèn)用什么來(lái)做接口測(cè)試？萬(wàn)能Jmeter打造性能測(cè)試數(shù)據(jù)平臺(tái)。jmeter 【 yyds】

閱讀 3647·2021-09-03 10:28
扯點(diǎn)：FC - Formatting Context

閱讀 2615·2019-08-29 14:11
CSS3筆記

閱讀 877·2019-08-29 13:54
學(xué)習(xí)canvas 過(guò)程中的幾點(diǎn)總結(jié)

閱讀 1650·2019-08-29 12:14
electron跳坑指南 1(electron的安裝)

閱讀 477·2019-08-26 12:12
如何利用JavaScript的Map提升性能

閱讀 3682·2019-08-26 10:45

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS3筆記

相關(guān)文章

CSS3學(xué)習(xí)筆記

CSS3 3D學(xué)習(xí)筆記

**圖解CSS3 讀書筆記——背景**

**圖解CSS3讀書筆記文本與顏色**

**圖解CSS3 讀書筆記——選擇器**

發(fā)表評(píng)論

0條評(píng)論

notebin

男|高級(jí)講師

TA的文章

RackNerd 美國(guó)勞工節(jié)促銷：美國(guó)服務(wù)器，高配置，大硬盤（最高達(dá)10x1.6TB SSD），猶他

OneTechCloud：易科雲(yún)月付9折季付8折，香港cn2 VPS(不限流量)，美國(guó)三網(wǎng)cn2 g

還在問(wèn)用什么來(lái)做接口測(cè)試？萬(wàn)能Jmeter打造性能測(cè)試數(shù)據(jù)平臺(tái)。jmeter 【 yyds】

扯點(diǎn)：FC - Formatting Context

CSS3筆記

學(xué)習(xí)canvas 過(guò)程中的幾點(diǎn)總結(jié)

electron跳坑指南 1(electron的安裝)

如何利用JavaScript的Map提升性能

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS3筆記

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！