One, @support determine browser support conditions define different styles
@1 Pixel Border
@supports (-webkit-backdrop-Filter:blur (1px)) {. O2_mark I {border:0 "\20" 66600200%200%origin:left top;-webkit-transform:scale (. ); -webkit-box-sizing:border-box;}}
@sticky Top-Suction optimization experience
Sticky conditions of Use:
Sticky elements can only be active within the parent container
Sticky element parent container cannot contain Overflow:hidden and Overflow:auto
1234567891011121314151617 |
.wx618_tabs{
position:relative;
&.
fixed ul{
position:
fixed
;
top:0;
left:0;
width:100%;
}
}
//支持sticty属性,运行
@suports (position:-webkit-sticky){
.wx618_tabs{
position:-webkit-sticky;
top:0;
&.
fixed ul{position:relative}
}
}
|
The Window.CSS.supports method is provided in the @JavaScript
12345 |
// JavaScript中提供了window.CSS.supports方法 // 第一种方法 var supportsFlex = CSS.supports( "display" , "flex" ); // 第二种方法 var supportsFlexAndAppearance = CSS.supports( "(display: flex) and (-webkit-appearance: caret)" ); |
Second, Calc subtraction operations
123456789 |
.col-3 { width:calc (100%-10px);      height:200px; } .clo-3 li { float : Left;      width:calc (100%/3); /* 33.3% */      height:200px; |
Third, picture horizontal mirror Flip
123456 |
.example-1 { transform: scaleX(-1); /* 方法一 */ } .example-2 { transform: rotateY(180deg); /* 方法二 */ } |
Iv. self-rotating motion
1234567891011121314151617181920 |
<div
class
=
"example"
></div>
.example {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
animation: autogyRation 4s linear infinite;
}
@keyframes autogyRation {
from {
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-60deg) rotate(-360deg);
}
}
|
Case Show: Demo
Five, sweep the light animation
1234567891011121314151617181920212223242526272829303132333435363738 |
<style>
.sample{
background-color: #0E1326;
padding-top:30px;
overflow: hidden;
}
.blank_text{
position: relative;
width:200px;
margin:20px auto;
color: #fff;
line-height: 1;
font-size: 50px;
font-size: 0.74074rem;
text-align: center;
overflow: hidden;
font-family:
"icomoon"
;
}
.blank_text:after{
width: 300%;
height: 100%;
content:
""
;
position: absolute;
top: 0;
left: 0;
background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
-webkit-animation: slide ease-
in
-
out 2s infinite;
}
@-webkit-keyframes slide{
0%{-webkit-transform:translateX(-66.666%);}
100%{-webkit-transform:translateX(0);}
}
</style>
<div
class
=
"sample"
>
<div
class
=
"blank_text"
>选择一本你喜欢的</div>
</div>
|
Vi. Hyper-transparent event CSS Properties
123 |
.example { pointer- event : none; } |
Vii. Ontouchstart urges css:active to enter into force
Eight, set chrome minimum font display less than 12px
Font:
- ios9+ CSS Font Set-apple-system words will call Apple, English/digital tune San Francisco;san Francisco not explicitly exposed on the IOS/MAC (cannot be called by the font name), need to call through this way;
- Chinese/English/numerals will be called in the iOS system that does not support-apple-system;
- Sans-serif will call Chinese/English/numerals under non-ios9+.
- Sans-serif will call Apple's Chinese/English/numerals under ios9+;
- Sans-serif in Android will call the system's Chinese/English font, generally do not need other settings;
- In general Sans-serif will call the default Chinese/English/digital text in the phone system
The font that is moved by reset can be set uniformly to:
1 |
font-family: -apple-system,Helvetica,sans-serif; |
Nine, set chrome minimum font display less than 12px
Google Chrome default Browser font minimum font is: 12px, and our mobile phone page is often less than 12px font. Resolution: Upper right corner (Customize and control) → settings → show advanced settings → Web content (custom font) → minimum font size (minimum can be set to 6px)
H5 Common Skills