虽然我是一个程序员，但是我有一张充满艺术气息的脸

最新推荐文章于 2024-09-24 11:41:48 发布

Yannnnnm

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量158

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/Yannnnnm/article/details/109066233

版权

知识普及

本图采用html和css以及css3来完成
涉及伪元素选择器（::after,::before)，阴影，渐变等；

::before,::after在不添加新元素的同时，在元素的内容前面或者后面插入新内，需要结合content一起使用

盒子阴影 box-shadow: h-shadow v-shadow blur spread color inset（水平阴影的位置，垂直阴影的位置，模糊距离，阴影尺寸，颜色，将外部阴影 (outset) 改为内部阴影。）
渐变分为线性渐变，径向渐变

利用background复合属性或者background-image属性进行设置
线性渐变linear-gradient（to 渐变方向，color1 百分比，color2 百分比，···）
径向渐变 radial-gradient（径向渐变的范围半径 at 渐变开始的位置，，color1 百分比，color2 百分比，···）

实现有思想的脸

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .face {
            width: 490px;
            height: 460px;
            border: 1px solid black;
            /* margin: 30px auto; */
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: 60px auto;
            /* 刘海 */
            /* 利用阴影创建刘海和脸周围的黑黑的 */
            /* box-shadow:水平位置 ，垂直位置，模糊度，阴影的宽度，阴影的颜色，阴影在里面还是外面 ; */
            box-shadow: 0px 60px 0px 0px #000 inset, 0px 60px 80px 0px #000 inset;
        }
        /* 眼睛 */
        
        .face::after,
        .face::before {
            content: '';
            display: block;
            width: 235px;
            height: 85px;
            border: 1px solid black;
            border-radius: 50%;
            /* 径向渐变 渐变的半径，从哪里开始渐变 颜色第一个写100%，控制眼珠是黑色的 */
            background-image: radial-gradient(30px at center, #000 100%, #fff);
            position: absolute;
            top: 50px;
            animation: eyes 5s linear infinite;
        }
        
        .face::before {
            left: 0;
        }
        
        .face::after {
            right: 0;
        }
        /* 实现眨眼睛的效果 */
        
        @keyframes eyes {
            0% {
                height: 85px;
            }
            5% {
                height: 40px;
            }
            10% {
                height: 10px;
            }
        }
        /* 鼻子 */
        
        .nose {
            height: 200px;
            width: 40px;
            border: 1px solid black;
            position: absolute;
            border-radius: 30px 30px 0 0;
            top: 130px;
            left: 225px;
        }
        /* 鼻孔 */
        
        .nose::after {
            content: '';
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            border: 1px solid black;
            position: absolute;
            bottom: -1px;
            left: -30px;
            z-index: 2;
            background-color: #fff;
        }
        
        .litnose {
            width: 100px;
            height: 15px;
            position: absolute;
            top: 290px;
            left: 197px;
            z-index: 3;
        }
        
        .litnose::after,
        .litnose::before {
            width: 25px;
            height: 10px;
            content: '';
            border: 1px solid #ff8794;
            position: absolute;
            border-radius: 10px 10px 0 0;
            bottom: -27px;
        }
        
        .litnose::after {
            right: 15px;
        }
        
        .litnose::before {
            left: 15px;
        }
        
        .mouse {
            width: 130px;
            height: 70px;
            border: 1px solid #000;
            border-radius: 50%;
            position: absolute;
            top: 350px;
            left: 180px;
        }
        
        .mouse::after {
            content: '';
            width: 100px;
            height: 30px;
            background-color: tomato;
            border-radius: 0 0 50% 50%;
            position: absolute;
            top: 30px;
            left: 15px;
        }
    </style>
</head>

<body>
    <div class="face">
        <div class="nose"></div>
        <div class="litnose"></div>
        <div class="mouse"></div>
    </div>

</body>

</html>