HTML+css小项目：会漂浮的幽灵源代码+注释

最新推荐文章于 2022-10-15 23:07:19 发布

萧子术

最新推荐文章于 2022-10-15 23:07:19 发布

阅读量439

点赞数

分类专栏：前端一些好玩的小项目文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46520579/article/details/113831619

版权

前端一些好玩的小项目专栏收录该内容

3 篇文章 1 订阅

订阅专栏

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幽灵漂浮效果</title>
    <style>
        /* 页面初始化，清除元素的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /* 弹性布局，让元素在页面中垂直+水平居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 让页面占浏览器可视区域的高度 */
            height: 100vh;
            background-color: #00034b;

        }
        .container .ghost{
            /* 相对定位 */
            position: relative;
            width: 150px;
            height: 225px;
            /* 圆角属性：左上角和右上角为圆角 */
            border-radius: 75px 75px 0 0;
            background-color: #fff;
            /* 盒子阴影 inset 是内阴影 啥都不加就是默认外阴影 */
            box-shadow: -17px 0 0 #dbdbdb inset,0 0 50px #5939db;

            animation: ghost 2s infinite;


        }
        /* 眼睛 start */
        .container .ghost .ghostEyes{
            /* 弹性布局 */
            display: flex;
            /* 让元素平均分配宽度 */
            justify-content: space-around;
            width: 90px;
            padding-top: 70px;
            margin: 0 auto;
                    }
                    /* 利用两个伪元素做出卡姿兰大眼睛 */
        .container .ghost .ghostEyes::before,
        .container .ghost .ghostEyes::after{
            content: "";
            width: 15px;
            height: 25px;
            border-radius: 50%;
            background-color: #00034b;
        }
        /* 眼睛 end */

        /* 腮红 start */
        /* 逻辑跟眼睛一样 */
        .container .ghost .ghostDimples{
            display: flex;
            justify-content: space-around;
            width: 130px;
            padding-top:15px;
            margin: 0 auto;
        }
        .container .ghost .ghostDimples::before,
        .container .ghost .ghostDimples::after{
            content: "";
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #ffbeff;
        }
        /* 腮红结束 */

        /* 脚 start */
        .container .ghost .ghostFeet{
            /* 这个主要是向让四只脚水平排列 */
            display: flex;
            position: absolute;
            bottom: -13px;
            width: 100%;

        }
        .container .ghost .ghostFeet .ghostFoot{
            width: 25%;
            height: 26px;
            border-radius: 50%;
            background-color: #fff;
        }
        /* 设置一下最后一个 让它跟身体的内阴影一样 */
        .container .ghost .ghostFeet .ghostFoot:last-child{
            /* 利用背景渐变色实现 to right 是从左到右 */
            background-image: linear-gradient(to right,#fff 55%,#dbdbdb 45%);

        }
        /* 脚 end */

        /* 阴影 start */
        .container .shadow {
            width: 150px;
            height: 40px;
            margin-top: 50px;
            border-radius: 50%;
            background-color: #000232;
            /* 绑定动画  名称 时长 无限循环*/
            animation: shadow 2s infinite;
        }
        /* 阴影 end */

        /* 然后开始制作动画 */
        @keyframes ghost {
            0%,100%{
                transform: translateY(0);
            }
            50%{
                /* 2D位移 -15px 是向上走 */
                transform: translateY(-15px);
            }
        }
        @keyframes shadow{
            0%,100%{
                transform: scale(1);
            }
            50%{
                /* 缩放0.9比1小一点点 */
                transform: scale(0.9);
            }
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="ghost">
            <div class="ghostEyes"></div>
            <ghostDimples></ghostDimples>
            <div class="ghostFeet">
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
            </div>
        </div>
        <div class="shadow"></div>
    </div>
</body>
</html>

ps：此项目来自：阿阳热爱前端

萧子术

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML+css小项目：会漂浮的幽灵源代码+注释

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫