• 61.纯 CSS 创作一只咖啡壶(这个不好看)


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

    感想: 好像不像呀,啊啊啊。伪元素、定位、动画、width和height包括内边距|边框|内容区。

    HTML code:

    <!-- 定义 dom,容器中包含 1 个元素表示壶体,其中再包含 1 个元素表示壶把手 -->
    <div class="container">
        <div class="pot">
            <div class="handle"></div>
        </div>
    </div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    *,
    *::before,
    *::after{
        /* 设置元素的width、height包括内边距、边框、内容区 */
        box-sizing: border-box;
    }
    /* 设置body的子元素水平垂直居中 */
    body{
        height: 100vh;
        display: flex;
        /* 排不下就换行 */
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        background: linear-gradient(to right bottom, silver, dimgray);
    }
    /* 设置容器样式 */
    .container {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: snow;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: pouring 3s linear infinite alternate;
    }
    /* 再用伪元素给壶加上光影 */
    .container::after {
        content: '';
        position: absolute;
        width: 70px;
        height: 70px;
        border: 3px solid transparent;
        border-left-color: white;
        border-radius: 50%;
        left: 40px;
        top: 40px;
        transform: rotate(-10deg);
    }
    @keyframes pouring {
        0%, 25% {
            transform: rotate(0deg);
        }
    
        75%, 100% {
            transform: rotate(-45deg);
        }
    }
    .pot {
        position: relative;
        width: 85px;
        height: 85px;
        /* 阴影 */
        border-right: 5px solid steelblue;
        border-radius: 50%;
        background-color: deepskyblue;
    }
    /* 用伪元素画出壶的上半部分 */
    .pot::before {
        content: '';
        position: absolute;
        width: 85px;
        height: 43px;
        border-right: 5px solid palevioletred;
        border-radius: 43px 43px 0 0;
        background-color: hotpink;
    }
    /* 用伪元素画出壶嘴 */
    .pot::after {
        content: '';
        width: 43px;
        height: 10px;
        position: absolute;
        left: 21px;
        top: -3px;
        background-color: hotpink;
    }
    /* 画出把手横向的部分 */
    .pot .handle {
        width: 83px;
        height: 7px;
        border-radius: 7px;
        background-color: black;
        position: absolute;
        left: 13px;
        top: 12px;
    }
    /* 用伪元素画出把手竖向的部分: */
    .pot .handle::before {
        content: '';
        width: 7px;
        height: 50px;
        border-radius: 7px;
        background-color: black;
        position: absolute;
        left: calc(85px - 7px);
    }
  • 相关阅读:
    Java多态的学习
    Java显示的静态初始化和非静态实例初始化
    Java类方法访问权限
    JavaScript数组详解
    JavaScript倒计时的具体实现
    JavaScript之Date对象
    JavaScript内置对象之Math对象
    JavaScript对象
    JS的作用域,作用域链及预解析
    JavaScript函数
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10641011.html
Copyright © 2020-2023  润新知