zoukankan      html  css  js  c++  java
  • 30.纯 CSS 创作一个晃动的公告板

    原文地址:https://segmentfault.com/a/1190000014983030

    感想: 绝对定位+动画

    HTML代码:

    <div class="signboard">
        <div class="sign">THANKS</div>
        <div class="strings"></div>
        <div class="pin top"></div>
        <div class="pin left"></div>
        <div class="pin right"></div>
    </div>

    CSS代码:

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at center 60%,white,saddlebrown)
    }
    .signboard{
        position: relative;
        width: 400px;
        height: 300px;
        /* border: 1px solid blue; */
    }
    .sign{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        border-radius: 15px;
        background: burlywood;
        line-height: 200px;
        text-align: center;
        font-family: sans-serif;
        font-weight: bold;
        color: saddlebrown;
        text-shadow: 0 2px 0 rgba(225, 225, 225, 0.3),
                    0 -2px 0 rgba(0, 0, 0, 0.7);
    }
    /* 画出细绳 */
    .strings{
        position: absolute;
        width: 150px;
        height: 150px;
        border: 5px solid brown;
        border-right: none;
        border-bottom: none;
        transform: rotate(45deg);
        top: 38px;
        left: 122px;
    }
    /* 画出细绳顶部的图钉 */
    .pin{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }
    .pin.top{
        background: gray;
        left: 187px;
    }
    /* 画出木板上左右两侧的图钉 */
    .pin.left,
    .pin.right{
        background: brown;
        top: 110px;
        box-shadow: 0 2px 0 rgba(255,255,255,0.3);
    }
    .pin.left{
        left: 80px;
    }
    .pin.right{
        right: 80px;
    }
    /* 让signboard晃动起来 */
    .signboard{
        animation: swing 1.5s ease-in-out infinite alternate;
        /* 用于指定元素变形的中心点 */
        transform-origin: 200px 13px;
    }
    @keyframes swing{
        from{
            transform: rotate(10deg);
        }
        to{
            transform: rotate(-10deg);
        }
    }
  • 相关阅读:
    如何使用Flannel搭建跨主机互联的容器网络
    移动端——touch事件
    Javascript 模块化指北
    vue重构--H5--canvas实现粒子时钟
    redux-saga框架使用详解及Demo教程
    前端代码编写规范
    探秘JS的异步单线程
    POJ 3714 Raid 近期对点题解
    EditText把回车键变成搜索
    Swift语言概览
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10332170.html
Copyright © 2011-2022 走看看