程序員給女朋友周年紀念的浪漫

代碼地址如下：
http://www.demodashi.com/demo/13022.html

一、准備工作

由於項目基於vue，所以需要有node環境可以啟動。本地先安裝好node環境，如果你還不知道怎么安裝，可以自行百度谷歌。

解壓之后，在目錄下面執行 npm install，稍等幾分鍾，等 node_modules 文件夾生成完畢之后，即可使用 npm run dev 啟動本地服務器，在瀏覽器打開 http://localhost:8080 進行訪問。

二、程序實現

目錄結構

/dist 目錄為打包后的代碼，可以直接放到你的本地服務器即可訪問。

/src 目錄為項目源碼。可以看css3如何寫出下面的這些形狀的。

/components/heart.vue 為css3實現愛心的組件
一顆愛心，我們使用兩個圓角的div 90°交叉，再通過一個div填補愛心下方的尖角。CSS3 transform: rotate(-45deg) 來旋轉div進行交叉

<template>
    <div class="heart">
        <div class="heart-circular left"></div>
        <div class="heart-circular right"></div>
        <div class="heart-square"></div>
    </div>
</template>
<style scoped>
    .heart{
        position: relative;
        width: 40px;
        height: 40px;
    }
    .heart-circular{
        position: absolute;
        width: 20px;
        height: 30px;
        border-radius: 10px;
        background: red;
    }

    .heart-circular.left{
        left: 3px;
        transform: rotate(-45deg);
    }
    .heart-circular.right{
        left: 15px;
        transform: rotate(45deg);
    }
    .heart-square{
        position: absolute;
        left: 10px;
        top: 14px;
        width: 18px;
        height: 17px;
        background: red;
        transform: rotate(45deg);
    }
</style>

/components/index.vue 為css3實現首頁手牽手的組件，手牽手的比較不好實現，手指的還原度不夠逼真。主要是通過每個小的div做為一根手指，再進行定位和旋轉。旋轉用到的屬性也是 transform: rotate(-15deg)

/components/man.vue 為css3實現男人送花的組件。送花的動作需要用到 CSS3 里的動畫 animation 屬性
給男人的胳膊的div加上動畫，抬起胳膊表示送花

.body .arm.left:before{
    left: 21px;
    top: 26px;
    border-right: 1px solid #ccc;
    border-top-left-radius:10px;
    transform: rotate(-60deg);
    animation: arm-up 4s ease;
}
@keyframes arm-up {
    0%,75%{
        left: 13px;
        top: 34px;
        transform: rotate(-30deg);
    }
    100%{
        left: 21px;
        top: 26px;
        transform: rotate(-60deg);
    }
}

animation: arm-up 4s ease 中的 arm-up 表示自定義的動畫名稱對應 @keyframes ，4s則是整個動畫的時間，從抬起到放下，ease 則是動畫過渡效果。

/components/rose.vue 為css3實現花的組件

<template>
    <div class="rose">
        <div class="petal"></div>
        <div class="leaf"></div>
        <div class="stem"></div>
    </div>
</template>
<style scoped>
    .rose{
        position: relative;
    }
    .rose .petal{
        position: absolute;
        left: 10px;
        top: 20px;
        width: 20px;
        height: 20px;
        background: #fd2d2d;
        border-radius: 5px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: -1px -1px 5px #d42a2a inset;
    }
    .rose .petal:before,.rose .petal:after{
        content: '';
        position: absolute;
        top: -2px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #fd2d2d;
    }
    .rose .petal:before{
        left: 0;
    }
    .rose .petal:after{
        right: 0;
    }
    .rose .leaf:before,.rose .leaf:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 4px;
        background:#15b115;
    }
    .rose .leaf:before{
        left: 5px;
        top: 59px;
        transform: rotate(45deg) skew(74deg);
    }
    .rose .leaf:after{
        left: 21px;
        top: 51px;
        transform: rotate(-45deg) skew(-74deg);
    }
    .rose .stem{
        position: absolute;
        left: 18px;
        top: 39px;
        width: 4px;
        height: 50px;
        background: #15b115;
        box-shadow: 0 -1px 1px green inset;
    }
</style>

花朵的葉子，用到 CSS3 屬性中的傾斜，相對用得比較少的一個轉換。transform: skew(-74deg)，定義沿着 X 和 Y 軸的 2D 傾斜轉換。

/components/sky.vue 為css3實現夜晚天空包括星星月亮和流星的組件
夜空中的星星的定位，你不可能把每個星星的樣式都寫一遍，這樣太浪費時間了。因此我們使用 sass 通過循環遍歷每個星星，再給個隨機的定位，會更加的逼真。星星一閃一閃的效果，依舊要使用到動畫 animation

.star{
    span{
        content: '';
        position: absolute;
        width: 1px;
        height: 1px;
        background: #FEFED1;
        border-radius: 50%;
        opacity: .8;
    }
    @for $i from 1 to 40{
        span:nth-child(#{$i}){
            left: random()*100%;
            top: random()*300px;
            animation: star-#{$i%2} 5s ease #{$i/4}s infinite;
        }
    }
}

/components/time.vue 為css3實現紀念四周年也就是相戀功多少天的組件

/components/windmill.vue 為css3實現風車的組件

<template>
    <div class="bottom">
        <div class="circle"></div>
        <div class="flabellumarea">
            <div class="flabellum one"><div class="a"></div></div>
            <div class="flabellum two"><div class="a"></div></div>
            <div class="flabellum three"><div class="a"></div></div>
            <div class="flabellum four"><div class="a"></div></div>
        </div>
    </div>
</template>

風車的葉片旋轉，很明顯也是用到了 CSS3 的旋轉，只要通過寫好div，再使用動畫進行無限的旋轉，就達到了風車在動的效果了。

@keyframes rotate {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}

三、運行效果

程序員給女朋友周年紀念的浪漫

代碼地址如下：
http://www.demodashi.com/demo/13022.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權