Position + margin implementation of adaptive

  • Adaptive vertical horizontal center
        .box {
            width: 400px;
            height: 400px;
            background: #00aeef;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
Copy the code
  • Adaptive elements should be widths such as header underscores

    <div class="title">Short headings/long headings</div>

    <style>
        .title {
            display: inline-block;
            position: relative;
            font-size: 24px;
        }
        .title::after {
            content: ' ';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -14px;
            margin: 0 10px;
            height: 8px;
            background: #00aeef;
            border-radius: 10px;
        }
    </style>
Copy the code


Full screen watermark

  • Add pointer-events: None to the watermark layer to not block normal page operation events.
    <div class="mask"> < /div>
    <div class="content"> < /div>
    <style>
        .mask {
            width: 100%;
            height: 100%;
            background: url(.);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            pointer-events: none;
        }
    </style>
Copy the code

Smooth scrolling

    <style>
        .box{
            scroll-behavior: smooth;
        }
    </style>
Copy the code

Animation Frame by frame

    <div class="ani"></div>
    <style>
        .ani {
            width: 280px;
            height: 280px;
            background: url(.) 0 0 no-repeat;
            background-size: auto 100%;
            margin: 0 auto;
            animation: ani 1.2 s linear infinite;
            animation-timing-function: steps(Frame number, end); }@keyframes ani {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -(Frame number * width)0; }}</style>
Copy the code

Multiline text overflow elision

    <style>
        .text {
            display: -webkit-box;
            word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: // number of lines;overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
Copy the code

Background image covered

  • Use the background-size cover attribute; It can realize the background image adaptive overlay automatic detection of width to height ratio magnifying image; Fill the container with pictures;
    <style>
        .box {
            background: url(.) center no-repeat;
            background-size: cover
        }
    </style>
Copy the code

Draw coupons using CSS3

  • First draw transparent point with gradient property; Then set background-size; The gradient background will repeat based on the background size set; Then the display position of the transparent point is controlled by background-position, and the outer contour of the coupon is finally realized.
    <div class="box"></div>

    <style>
        .box {
            width: 300px;
            height: 150px;
            background: radial-gradient(circle at 20px 20px, transparent 0, transparent 20px.#00aeef 21px);
            background-position: 80px -20px;
            background-size: 100% 100%;
            border-radius: 20px;
        }
    </style>
Copy the code

  • To be continued…