div+css绘制一个咖啡-html代码-BFW代码库

div+css绘制一个咖啡

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            padding: 0;
            background: #EE829A;
        }

        .coffee-bottom {
            width: 300px;
            height: 300px;
            background: #FFFAF9;
            margin-left: 20em;
            margin-top: 5em;
            border-radius: 50%;
            -webkit-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);

        }

        .coffee-cup {

            width: 170px;
            height: 170px;
            position: relative;
            left: 60px;
            top: 60px;
            background: #FFFAF9;
            border-radius: 50%;
            -webkit-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
        }

        .coffee-cup:before {
            content: "";
            width: 25px;
            height: 35px;
            position: absolute;
            background: #FFFAF9;
            top: 68px;
            left: -23px;
            -webkit-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            box-shadow: -12px 11px 34px -2px rgba(0,0,0,0.75);
            border-radius: 15px 0 0 15px;
        }

        .coffee {
            position: relative;
            background: rgb(112,88,64);
            width: 140px;
            height: 140px;
            border-radius: 50%;
            left: 12px;
            top: 12px;
            border: 3px solid #3A2316;
        }

        .coffee:after {
            content: "";
            width: 10px;
            height: 35px;
            display: inline-block;
            background: #F3C482;
            position: absolute;
            top: 10px;
            left: 105px;
            border-radius: 50%;
            transform: rotate(-45deg)
        }

        .spoon {
            width: 20px;
.........完整代码请登录后点击上方下载按钮下载查看