css布局雪花球水晶球效果代码-html代码-BFW代码库

css布局雪花球水晶球效果代码

代码语言：html

代码描述：css布局雪花球水晶球效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
            margin: 0;
            padding: 0;  
        		background: #FBD5C5;
        }
        .wrapper {
            display: flex;
        		width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            align-items: center;
            justify-content: center;
            background: #FBD5C5;
        }
        .wrapper__content {
                width: 800px;
                height: 600px;
                position: relative;
                background: #FBD5C5
            }
        .ball {
            width: 416px;
            height: 440px;
            position: relative;
            margin: 80px auto;
        }
        .ball__glass {
                overflow: hidden;
                width: 416px;
                height: 416px;
                border-radius: 100%;
                background: #28367F;
                position: absolute;
                box-shadow: 0 0 10px 6px rgb(255 255 255 / 38%);
            }
        .ball__stand {
                position: absolute;
                background: #ED6B69;
                bottom: 0;
                width: 266px;
                height: 65px;
                bottom: 0;
                left: 75px;
                border-radius: 6px;
        
            }
        .ball__stand:before,
                .ball__stand:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 51px;
                    height: 51px;
                    border-radius: 0 50% 50% 50%;
                    background: #ED6B69;
                    bottom: 0;
                }
        .ball__stand:before {
                    transform: rotate(42deg);
                    left: -23px;
                }
        .ball__stand:after{
                    transform: rotate(49deg);
                    right: -23px;
                }
        .house {
            width: 227px;
            height: 217px;
            position: absolute;
            left: 95px;
            top: 115px;
        }
        .house__body {
                position: absolute;
                width: 227px;
                height: 140px;
                background: #F5A6A7;
                top: 78px;
            }
        .house__pipe{
                background: #F5A6A7;
                position: absolute;
                width: 45px;
                height: 60px;
                top: 2px;
                left: 36px;
            }
        .house__roof {
                content: "";
                position: absolute;
                left: 0px;
                border: 114px solid transparent;
                border-bottom-color: #ED6B69;
                bottom: 105px;
                transform: scaleY(0.7);
            }
        .house__eyes {
                position: absolute;
                left: 57px;
                right: 56px;
                top: 32px;
            }
        .house__eyes:after,
                .house__eyes:before {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                    top: 0;
                    background: #2A377F;
                }
        .house__eyes:after {
                    right: 0;
                }
        .house__eyes:before {
                    left: 0;
                }
        .house__blush {
                position: absolute;
                left: 22px;
                right: 22px;
                top: 69px;
            }
        .house__blush:after,
                .house__blush:before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 44px;
                    height: 34px;
                    border-radius: 43%;
                    top: 0;
                    background: #FFFFFF;
                }
        .house__blush:after {
                    right: 0;
                }
        .house__blush:before {
                    left: 0;
                }
        .house__mouth {
                position: absolute;
                left: 96px;
                top: 39px;
                border: 8px solid transparent;
                border-radius: 100%;
                width: 18px;
                height: 18px;
                border-bottom-color: #2A377F;
                border-right-color: #2A377F;
                transform: rotate(45deg);
            }
        .house__mouth:after,
                .house__mouth:before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                   .........完整代码请登录后点击上方下载按钮下载查看