SVG製做可愛小頁面

時間 2019-11-10

標籤 svg 製做愛小頁面简体版

原文原文鏈接

好久都沒有在博客園上發表一些本身學的新東西了，只是在有空的時候逛一逛博客園而已，看來我不是一個真正的程序員，哈哈！html

可是今天很是想和你們分享一個小東西，那是前兩天在一個網頁上看到了這個東西程序員

我好奇中間那個是怎麼作出來的就F12看了一下它的html頁面代碼，我看到了這個標籤circle，當時就比較好奇了，由於我好像沒見過這個標籤，果真不是一個真正的程序員，我這段時間都在幹嗎了呢？哈哈！web

不要緊，通常不懂的話我都去問度娘，由於別人靠不住，只能靠本身，當本身也靠不住的時候就去靠度娘，好想配上一個笑哭的表情，怎麼沒有表情呢哈哈！ide

而後就去百度了，svg

這不是我想要的結果，哈哈！不開玩笑了而後就懂得了circle是SVG（意爲可縮放矢量圖形）的一個標籤，而後就去簡單看了關於SVG的寫法與用法，oop

具體的你們想學習的話能夠去百度找找，經過簡單的學習和本身實踐（其實還不是太懂），本身開始不太喜歡去看那些字面的解釋，都是實踐的多，因此理論知識感受彷佛不懂。學習

很少說了，反正我就作出了一個簡單可愛的頁面，效果圖以下圖：this

太陽、草坪、花朵、房子等都是用SVG作出來的，可能看起來是一個比較幼稚的畫面，但沒辦法，少女心，哈哈！url

廢話那麼多能有幾位朋友能看到這裏呢？或是有些朋友直接跳到代碼，無論怎麼樣能到這裏的朋友都是個人榮幸，謝謝你們，接下來上代碼吧，但願不讓你們失望。spa

HTML部分：
<body>
        <div class="box">
            <!--圓形太陽-->
            <svg width="200" height="200" viewBox="0 0 1000 1000" class="sun">
                <circle cx="500" cy="500" r="280" stroke="none" fill="#f77722"></circle>
                <circle cx="500" cy="500" r="400" stroke-width="50" stroke="#f77722" fill="none" stroke-dasharray="20 120"></circle>
                <circle cx="400" cy="400" r="20" fill="#000"></circle>
                <circle cx="600" cy="400" r="20" fill="#000"></circle>
                <circle cx="500" cy="550" r="100" fill="none" stroke="#000" stroke-width="10" stroke-dasharray="300 700"></circle>
            </svg>
            <!--橢圓形草坪-->
            <div class="sod">
                <svg width="100%" height="100%">
                    <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#269b13" />
                </svg>
            </div>
            <!--花朵-->
            <div class="floret">
                <svg width="100%" height="100%">
                    <line x1="280" y1="0" x2="300" y2="300" stroke-width="2" stroke="#269b13" />
                    <line x1="195" y1="5" x2="300" y2="300" stroke-width="2" stroke="#269b13" />
                </svg>
                <svg width="100" height="100" viewBox="0 0 100 100" class="floret1">
                    <circle cx="50" cy="50" r="8" fill="red"></circle>
                    <circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle>
                </svg>
                <svg width="100" height="100" viewBox="0 0 100 100" class="floret2">
                    <circle cx="50" cy="50" r="8" fill="red"></circle>
                    <circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle>
                </svg>
                <svg width="100" height="100" viewBox="0 0 100 100" class="leaf1">
                    <ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" />
                </svg>
                <svg width="100" height="100" viewBox="0 0 100 100" class="leaf2">
                    <ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" />
                </svg>

            </div>
            <!--房子-->
            <div class="house">
                <!--屋頂-->
                <svg class="roof">
                    <polygon points="0,150 200,0 400,150" fill="#ccc" stroke="#000" stroke-width="1" />
                </svg>
                <!--房子-->
                <svg class="house1">
                    <rect width="300" height="200" fill="#fff" stroke-width="2" stroke="#000" />
                </svg>
                <!--窗戶-->
                <svg class="window">
                    <rect width="60" height="60" fill="#fff" stroke-width="2" stroke="#000" />
                    <line x1="30" y1="0" x2="30" y2="60" stroke-width="2" stroke="#000" />
                    <line x1="0" y1="30" x2="60" y2="30" stroke-width="2" stroke="#000" />
                </svg>
                <!--門口-->
                <svg class="house2">
                    <rect width="80" height="100" fill="#fff" stroke-width="2" stroke="#000" />
                    <line x1="40" y1="0" x2="40" y2="100" stroke-width="2" stroke="#000" />
                    <line x1="30" y1="60" x2="50" y2="60" stroke-width="2" stroke="#000" />
                    <circle cx="16%" cy="42%" r="5" fill="#000"></circle>
                </svg>
                <!--煙囪-->
                <svg class="stack">
                    <rect width="25" height="80" fill="none" stroke="#000" stroke-width="2" />
                </svg>
                <!--煙-->
                <svg class="cigarette1">
                    <ellipse cx="4%" cy="4%" rx="4%" ry="4%" fill="none" stroke="#000" stroke-width="1" />
                </svg>
                <svg class="cigarette2">
                    <ellipse cx="6%" cy="6%" rx="6%" ry="6%" fill="none" stroke="#000" stroke-width="1" />
                </svg>
            </div>

            <div class="bird">
                <img src="img/bird.png" />
            </div>
            <div class="bird bird2">
                <img src="img/bird.png" />
            </div>
            <!--淡入淡出輪播圖-->
            <div class="line">
                <img src="img/4b90f603738da977506b270cba51f8198618e355.png" />
            </div>
            <div class="banner">
                <ul>
                    <li>
                        <img src="img/banner8.jpg" />
                    </li>
                    <li>
                        <img src="img/banner2.jpg" />
                    </li>
                    <li>
                        <img src="img/banner3.jpg" />
                    </li>
                    <li>
                        <img src="img/banner4.jpg" />
                    </li>
                    <li>
                        <img src="img/banner5.jpg" />
                    </li>
                    <li>
                        <img src="img/banner6.jpg" />
                    </li>
                    <li>
                        <img src="img/banner7.jpg" />
                    </li>
                    <li>
                        <img src="img/banner1.jpg" />
                    </li>
                </ul>
            </div>
            <!--文字滾動-->
            <div id="sdmsg">
                <marquee direction="up" scrollamount="1" behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" onmouseover=" this.stop(); " onmouseout="this.start();">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;萬兩黃金容易得,知音一個也難求。 孤帆遠影碧空盡，唯見長江天際流。 勢利交懷勢利心，斯文誰復念知音！伯牙不做鍾期逝，千古使人說破琴。 採葵莫傷根，傷根葵不生。結交莫羞貧，羞貧友不成。 隔山隔水不隔心，友誼無論遠與近，好花真想季季開，朋友真想每天在。 若知四海皆兄弟，何處相逢非故人。 勸君更進一杯酒，西出陽關無端人。 人生結交在終始，莫爲升沉中路分。 不知其人，視其友。 真實的十分理智的友誼是人生最美好的無價之寶。 換我心，爲你心，始知相憶深。 君子之交淡若水,小人之交甘若醴.君子淡以親,小人甘以絕。 翻手做雲覆手雨，紛紛輕薄何必數。君不見管鮑貧時交，此道今人棄如土。 今日樂相樂，別後莫相忘。 朋友老是心連心，真正朋友值千金，燈光之下思賢友，時刻勿忘朋友心。
                    </p>
                </marquee>
            </div>
            <!--音樂播放-->
            <div class="music">
                <audio src="img/薛凱琪、陳意涵、楊子姍 - 一塊兒老去.mp3 " autoplay="autoplay " loop="-1 " controls="controls "></audio>
            </div>
        </div>
    </body>

CSS部分：
* {
    margin: 0px;
    padding: 0px;
}
ul,
li {
    list-style: none;
}

/*最外層盒子*/

.box {
    min-height: 680px;
    height: 100%;
    position: relative;
}


/*草坪*/

.sod {
    min-width: 1300px;
    width: 100%;
    position: absolute;
    bottom: 0%;
}

/*花朵*/
.floret {
    min-width: 1300px;
    width: 100%;
    position: absolute;
    bottom: 10%;
}

.floret1 {
    /*border: 1px solid red;*/
    position: absolute;
    top: -50%;
    left: 16.5%;
}

.floret2 {
    position: absolute;
    top: -40%;
    left: 10%;
}

.leaf1 {
    position: absolute;
    top: 10%;
    left: 21%;
}

.leaf2 {
    position: absolute;
    top: 10%;
    left: 17%;
}


/*房子*/

.house {
    min-width: 1300px;
    width: 100%;
    height: 250px;
    position: absolute;
    bottom: 15%;
}

.house1 {
    position: absolute;
    bottom: 0%;
    left: 40%;
    z-index: 10;
}

.house2 {
    position: absolute;
    bottom: -20%;
    left: 54%;
    z-index: 10;
}


/*屋頂*/

.roof {
    position: absolute;
    left: 36%;
    width: 400px;
    top: -20%;
    height: 150px;
}


/*窗口*/

.window {
    position: absolute;
    bottom: -20%;
    left: 44%;
    z-index: 10;
}


/*煙囪*/

.stack {
    position: absolute;
    top: -10%;
    left: 58%;
    z-index: -10;
}


/*煙*/

.cigarette1 {
    position: absolute;
    top: -20%;
    left: 58%;
}

.cigarette2 {
    position: absolute;
    top: -30%;
    left: 59%;
}


/*淡入淡出輪播圖*/

.banner {
    width: 180px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 300px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}

.banner ul,
li,
img {
    display: block;
    width: 180px;
    height: 300px;
}

li {
    position: absolute;
    top: 0px;
    left: 0px;
}

.bird {
    width: 100px;
    height: 80px;
    position: absolute;
    top: 60px;
    left: 700px;
}

.bird2 {
    top: 70px;
    left: 800px;
}

.bird img {
    display: block;
    width: 100%;
    height: 100%;
}

.line {
    width: 400px;
    height: 80px;
    position: absolute;
    top: 20px;
    left: 195px;
    z-index: 100;
}

.line img {
    display: block;
    width: 100%;
    height: 100%;
}

#sdmsg {
    width: 350px;
    height: 400px;
    position: absolute;
    left: 950px;
    top: 100px;
    z-index: 200;
    background: url(../img/bg.png) no-repeat;
}

#sdmsg marquee {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    font-family: "騰祥鐵山楷書繁", "楷體","微軟雅黑";
}

.music {
    position: absolute;
    left: 950px;
    top: 50px;
}

jq部分：（實現的是圖片的淡入淡出）
$(function() {　
    //    圖片淡入淡出　　
    var i = 0;
    var img = $(".banner ul li");
    img.eq(0).show().siblings().hide(); //先顯示第一張
    setInterval(function() {
        i++;
        if(i > img.length) {
            i = 0;
        }
        $(".banner ul li").eq(i).fadeIn().siblings().fadeOut();
    }, 10000);

});

代碼就是這樣的，可能會寫得很亂，你們不要介意，畢竟我不是一個真正的程序員，哈哈哈！你們也能夠在個人基礎上作出簡化版來，樣式我都是經過定位寫死的，因此頁面沒有什麼擴展性。由於只是想單純作出一個可愛的頁面而已，但願你們可以喜歡。看來之後要多分享分享本身學到的新東西，哈哈哈！今天就到這咯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。