純css實現qqlogo圖_ZenDei技術網路在線

純css實現qqlogo圖

-Advertisement-

<!doctype html> <html> <head> <title>CSS3logo</title> <style type="text/css"> html, body, div, img { margin: 0; padding: 0; } #box { position: absolut ...

<!doctype html>
<html>
<head>
    <title>CSS3logo</title>
    <style type="text/css">
        html, body, div, img {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            left: 0;
            top: 0;
        }

        #head {
            position: absolute;
            left: 135px;
            top: 10px;
            background: #121214;
            width: 127px;
            height: 134px;
            border-radius: 50%/49%;
            z-index: 1;
        }

        #body {
            position: absolute;
            left: 128px;
            top: 68px;
            background: #121214;
            width: 141px;
            height: 138px;
            border-radius: 50%;
        }

        #belly {
            position: absolute;
            left: 144px;
            top: 79px;
            background: #fbfbfb;
            width: 110px;
            height: 123px;
            border-radius: 50%;
        }

        .foot {
            position: absolute;
            top: 186px;
            background: #febf18;
            width: 63px;
            height: 30px;
            border-radius: 50%;
            box-shadow: 0 3px #dc9111;
            z-index: -1;
        }

        #leftFoot {
            left: 132px;
            transform: rotate(-3deg);
        }

        #rightFoot {
            left: 202px;
            transform: rotate(3deg);
        }

        .eye {
            position: absolute;
            top: 44px;
            width: 24px;
            height: 35px;
            background: #fff;
            border-radius: 50%;
            z-index: 2;
        }

        #leftEye {
            left: 170px;
        }

        #rightEye {
            left: 203px;
        }

        #leftEyeBall {
            position: absolute;
            left: 180px;
            top: 53px;
            width: 6px;
            height: 14px;
            border-radius: 50%;
            background: #171718;
            border: solid 2px #040305;
            z-index: 2;
        }

            #leftEyeBall > div {
                position: absolute;
                left: 2px;
                top: 1px;
                width: 3px;
                height: 7px;
                border-radius: 50%;
                background: #fff;
            }

        #rightEyeBall {
            position: absolute;
            left: 206px;
            top: 53px;
            width: 13px;
            height: 13px;
            overflow: hidden;
            z-index: 2;
        }

            #rightEyeBall > div {
                width: 7px;
                height: 14px;
                border-radius: 50%;
                border: solid 3px #040305;
            }

        .hand {
            position: absolute;
            top: 130px;
            width: 70px;
            height: 23px;
            border-radius: 50%;
            background: #121214;
        }

        #leftHand {
            left: 91px;
            transform: rotate(-70deg);
        }

        #rightHand {
            left: 235px;
            transform: rotate(70deg);
        }

        #scarf {
            position: absolute;
            left: 123px;
            top: 89px;
            width: 148px;
            height: 55px;
            z-index: 2;
            border: solid 1px transparent;
            overflow: hidden;
        }

        #scarf1 {
            position: absolute;
            left: 152px;
            top: 117px;
            width: 27px;
            height: 50px;
            z-index: 2;
            background: #e32a0e;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 6px;
            transform: skewY(8deg) rotate(2deg);
        }

        #scarf > #circle {
            position: absolute;
            left: -40px;
            top: -233px;
            width: 186px;
            height: 243px;
            border-radius: 50%;
            border: solid 22px #e32a0e;
        }

        #scarf > .clip {
            position: absolute;
            top: -30px;
            width: 20px;
            height: 55px;
            background: #fff;
        }

        #leftClip {
            left: -7px;
            transform: rotate(20deg);
        }

        #rightClip {
            left: 136px;
            transform: rotate(-20deg);
        }

        #mouth {
            position: absolute;
            left: 157px;
            top: 84px;
            width: 83px;
            height: 22px;
            border-radius: 50%;
            background: #fdbe18;
            z-index: 2;
        }

            #mouth > #m_child_0 {
                margin: 0 auto;
                width: 76px;
                height: 24px;
                border-radius: 50%;
                background: #fdbe18;
            }

            #mouth #m_child_1 {
                margin: 0 auto;
                width: 60px;
                height: 27px;
                border-radius: 50%;
                background: #fdbe18;
            }

            #mouth #m_child_2 {
                margin: 0 auto;
                width: 50px;
                height: 29px;
                border-radius: 50%;
                background: #fdbe18;
            }

            #mouth #m_child_3 {
                position: absolute;
                left: 9px;
                top: 2px;
                width: 66px;
                height: 20px;
                overflow: hidden;
                border-radius: 50%;
            }

            #mouth #m_child_4 {
                position: absolute;
                left: -1px;
                top: -9px;
                width: 68px;
                height: 26px;
                border-radius: 50%;
                box-shadow: 0px 1px 1px #8f3201;
                background: #fdbe18;
            }

            #mouth #m_child_5 {
                position: absolute;
                left: 21px;
                top: 2px;
                width: 42px;
                height: 22px;
                border-radius: 50%;
                background: #8f3201;
            }

            #mouth #m_child_6 {
                margin: 1px auto;
                width: 30px;
                height: 23px;
                border-radius: 50%;
                background: #8f3201;
            }
    </style>
</head>
<body>
    <div id="box">
        <div id="head"></div>
        <div id="body"></div>
        <div id="belly"></div>
        <div id="leftFoot" class="foot"></div>
        <div id="rightFoot" class="foot"></div>
        <div id="leftEye" class="eye"></div>
        <div id="rightEye" class="eye"></div>
        <div id="leftEyeBall"><div></div></div>
        <div id="rightEyeBall"><div></div></div>
        <div id="leftHand" class="hand"></div>
        <div id="rightHand" class="hand"></div>
        <div id="scarf">
            <div id="circle"></div>
            <div id="leftClip" class="clip"></div>
            <div id="rightClip" class="clip"></div>
        </div>
        <div id="scarf1"></div>
        <div id="mouth">
            <div id="m_child_0">
                <div id="m_child_1">
                    <div id="m_child_2"></div>
                </div>
            </div>
            <div id="m_child_5">
                <div id="m_child_6"></div>
            </div>
            <div id="m_child_3">
                <div id="m_child_4"></div>
            </div>
        </div>
    </div>
</body>
</

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Html5 簡單選擇排序演示

簡單選擇排序，是選擇排序演算法的一種。基本思想：每趟從待排序的記錄中選出關鍵字最小的記錄，順序放在已排序的記錄序列末尾，直到全部排序結束為止。由於在每次迴圈中，會對數值相等的元素改變位置，所以屬於非穩定排序。如下圖所示：對簡單選擇排序的優化方案，是採用二元選擇排序，即將其改進為每趟迴圈確定兩個元素 ...
用戶點擊數量統計

在微信上做一次推廣活動，頁面共計三個按鈕，需要分別統計點擊次數，pc上的相關統計用的是“百度統計”，因為H5活動頁的時效性等原因，並沒有使用百度統計，而是自己實現一個簡單的統計小方案：前端點擊時請求一個空白小gif圖，帶有參數，後端同事根據nginx請求日誌做統計，通過在cookie中存入一個不會重 ...
CSS3之新UI方案

border-radius 圓角參數可為像素也可為百分比當一個參數時作用範圍為四個角當兩個參數時作用範圍為左上右下右上左下當三個參數時作用範圍為左上右上左下右下當四個參數時作用範圍為左上右上右下左下當參數中有'/'時例如 100px/150px 則表示:X軸 ...
JavaScript中數據類型轉換總結

JavaScript中數據類型轉換總結在js中，數據類型轉換分為顯式數據類型轉換和隱式數據類型轉換。 1，顯式數據類型轉換 a:轉數字： 1）Number轉換：代碼： var a = “123”; a = Number(a); 註意： a)如果轉換的內容本身就是一個數值類型的字元串，那麼將來在 ...
jQuery動畫-聖誕節禮物

▓▓▓▓▓▓ 大致介紹下午看到了一個送聖誕禮物的小動畫，正好要快到聖誕節了，就動手模仿並改進了一些小問題原地址：花式輪播聖誕禮物傳送思路：動畫中一共有五個禮物，他們平均分佈在屏幕中，設置最外邊的兩個禮物旋轉一定的角度並隱藏，動畫開始，每個禮物向右移動一定的位置，然後再把第五個禮物添加到第一個 ...
Httpster –世界各地最潮的網頁設計案例聚合網站

Httpster 這個網站聚合了世界各地最新最潮的網頁設計案例，展示了創意的設計，精心的策劃，優秀的排版。這些作品都按月份和類別進行了很好劃分，你可以方便的找到自己感興趣的網站案例。 ...
分頁插件--根據Bootstrap Paginator改寫的js插件

剛剛出來實習，之前實習的公司有一個分頁插件，和後端的數據字典約定好了的，基本上是看不到內部是怎麼實現的，新公司是做WPF的，好像對於ASP.NET的東西不多，導師扔了一個小系統給我和另一個同事，指了兩種框架的方案就讓我們自己做了。。。剛開始在網上找了一下，覺得bootstrap-paginator ...
JSONP實現

使用jsonp實現跨域獲取數據。 js部分在頁面中測試結果可以返回結果，頁面顯示為，表示獲取成功！ ...