H5 and h5 skills

Source: Internet
Author: User
Tags image flip

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


  • If the css font of ios9 + is set to-apple-system, the Chinese language will call the apple, and the English/numbers will call San Francisco; san Francisco is not explicitly exposed on ios/mac (cannot be called by the font name) and needs to be called in this way;
  • In ios systems that do not support-apple-system, the Chinese/English/numbers of 文 are called;
  • Sans-serif will call the Chinese/English/numbers of 文 in non-ios9 +;
  • Sans-serif calls the Chinese/English/numbers of apple under ios9 +;
  • In Android, sans-serif calls the Chinese/English font of the system. Generally, no additional settings are required;
  • In general, sans-serif calls the default Chinese/English/numbers in the mobile phone system.

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)



CSS3 implements text Scanning

Css3 animation attribute to realize the effect of image scanning and highlight


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.