H5 and h5 skills
Every day, my work is mobile, and I will summarize the frequently used skills in my daily work.
I. @ support determine the browser support conditions and define different styles@ 1 pixel border
@supports (-webkit-backdrop-filter:blur(1px)) { .o2_mark i { border: 0 } .o2_mark i::before { content: "\20"; border: 1px solid #666; position: absolute; left: 0; top: 0; width: 200%; height: 200%; -webkit-transform-origin: left top; -webkit-transform: scale(.5); -webkit-box-sizing: border-box; }}
@ Sticky ceiling Optimization
Sticky usage conditions:
The sticky element can only be active in the parent container.
The parent container of the sticky element cannot contain overflow: hidden and overflow: auto.
. Wx618_tabs {position: relative ;&. fixed ul {position: fixed; top: 0; left: 0; width: 100% ;}// supports the sticty attribute. Run @ suports (position:-webkit-sticky ){. wx618_tabs {position:-webkit-sticky; top: 0 ;&. fixed ul {position: relative }}}
@ JavaScript provides the window. CSS. supports Method
// Window is provided in JavaScript. CSS. supports Method // method var supportsFlex = CSS. supports ("display", "flex"); // method var supportsFlexAndAppearance = CSS. supports ("(display: flex) and (-webkit-appearance: caret )");Ii. calc addition, subtraction, multiplication, division
.col-3 { width: calc(100%-10px); height: 200px;}.clo-3 li { float: left; width: calc(100% / 3); /* 33.3% */ height: 200px;}Iii. Image horizontal image flip
. Example-1 {transform: scaleX (-1);/* method 1 */}. example-2 {transform: rotateY (180deg);/* method 2 */}Iv. Self-rotating motion
<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 study: demo
5. Scanning Animation<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 transform-in-out 2 s infinite ;} @-webkit-keyframes slide {0% {-webkit-transform: translateX (-66.666%);} 100% {-webkit-transform: translateX (0 );}} </style> <div class = "sample"> <div class = "blank_text"> select one of your favorite </div>Vi. css attributes of a transparent event
.example { pointer-event: none;}7. Add ontouchstart to promote css: active
<body ontouchstart="">8. Set the minimum Chrome font to display less than 12px
Font:
The moved font reset can be set:
font-family: -apple-system,Helvetica,sans-serif;
9. Set Chrome to display less than 12px in the smallest font.
Google Chrome's default browser font is 12px, while our mobile phone page often has a font smaller than 12px.Solution:Upper-right corner (custom and Control) → settings → display advanced settings → network content (Custom font) → min font size (minimum can be set to 6px)
References:
CSS3 implements text Scanning
Css3 animation attribute to realize the effect of image scanning and highlight
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
