摘要:隱藏表單寬高設為祖先元素隱藏或在頁面外默認所有屬性都將獲得過渡效果。這個屬性可以讓你禁用系統默認菜單。背景裁剪到內容區外沿。
HTML隱藏
display:none; 表單 type=”hidden” 寬高設為0 height:0;width:0; 祖先元素隱藏或在頁面外 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; 默認outsettransition
transition: all #所有屬性都將獲得過渡效果。 property #定義應用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔 transition-duration #規定完成過渡效果需要多少秒或毫秒 transition-timing-function #規定速度效果的速度曲線 inear #規定以相同速度開始至結束的過渡效果 ease #規定慢速開始,然后變快,然后慢速結束的過渡效果 ease-in #規定以慢速開始的過渡效果 ease-out #規定以慢速結束的過渡效果 ease-in-out #規定以慢速開始和結束的過渡效果 transition-delay #定義過渡效果何時開始。 transform-origin: x-axis y-axis z-axis; #設置旋轉中心 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/*持續時間*/ animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out animation-delay /*延遲時間*/ animation-iteration-count animation-direction :normal | altenate animation-fill-mode: none | forwards /*當動畫完成后,保持最后一個屬性值*/| 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) /*旋轉*/ skew(x-angle,y-angle) /*傾斜*/ transition-property /*規定設置過渡效果的 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...
-webkit-touch-calloutbackground: 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));
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);
radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%)
background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
-webkit-touch-callout: none; #在iOS上,當你觸摸并按住觸摸的目標,比如一個鏈接,Safari瀏覽器將顯示鏈接有關的系統默認菜單。這個屬性可以讓你禁用系統默認菜單。-webkit-tap-highlight-color
-webkit-tap-highlight-color: rgba(0,0,0,0); #點擊一個鏈接 背景顏色user-select
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; #禁止用戶選擇文字或圖片,內容filter
https://www.w3cplus.com/css3/...
https://developer.mozilla.org...
background-clip: border-box; // 背景延伸到邊框外沿(但是在邊框之下)
background-clip: padding-box; // 邊框下面沒有背景,即背景延伸到內邊距外沿。
background-clip: content-box; // 背景裁剪到內容區 (content-box) 外沿。
默認值(initial),繼承(inherit)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112784.html
摘要:在動畫過程中,您能夠多次改變這套樣式。以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。為了獲得最佳的瀏覽器支持,您應該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括: 背景和邊框 文本效果 2D/3D 轉換 動畫 多列布局 用戶界面 CSS3 邊框: 用于創建圓角 border...
摘要:最近學習了的動畫在這里做一個總結。也可以用復合屬性移動圖片正方向的左邊移動也就是我們的右邊不要以為始終是是數學數軸的軸方向。其中值為默認值,表示所有子元素在平面呈現。更多的還是需要結合代碼修改練習去體會。 最近學習了CSS3的動畫,在這里做一個總結。現在大部分的交互動畫,我們都可以使用CSS3來完成,效率更高,并且在移動端上的兼容非常好。但是缺少一種正向編程的快感(個人感覺)。 先引出...
摘要:將保持背景的原始高度和寬度。對于平鋪的重復性背景圖像,確保背景圖像不會有截斷效果。解決屏幕雙倍像素下背景圖像模糊問題。將大圖縮小一倍使用鏈接或者列表元素的背景圖像能和文本一起進行縮放。內聯元素背景圖像平鋪循環方式暫無文章多背景 CSS背景屬性 基本屬性 background-color: 默認值為transparent,可以以顏色名、rgb(css3新增rgba)、hls(css3中新...
摘要:將內容在邊界內換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞,達到詞內換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...
摘要:選擇器統覽的選擇器及其對應的瀏覽器兼容性前端觀察這篇文章已經詳細總結了通過測試有如下更正或說明注下述瀏覽器兼容性以表示,表明以及以上版本。 CSS1、2、3選擇器統覽 css1、2、3的選擇器及其對應的瀏覽器兼容性前端觀察這篇文章已經詳細總結了:Click 通過測試:有如下更正或說明: 注:下述瀏覽器兼容性以x+表示,表明x以及x以上版本。 動態偽類選擇器E:active:若E為錨...
閱讀 3686·2021-09-07 10:19
閱讀 3627·2021-09-03 10:42
閱讀 3584·2021-09-03 10:28
閱讀 2548·2019-08-29 14:11
閱讀 809·2019-08-29 13:54
閱讀 1594·2019-08-29 12:14
閱讀 417·2019-08-26 12:12
閱讀 3614·2019-08-26 10:45