一、准备工作
由于项目基于vue，所以需要有node环境可以启动。本地先安装好node环境，如果你还不知道怎么安装，可以自行百度谷歌。
二、程序实现
目录结构
/dist 目录为打包后的代码，可以直接放到你的本地服务器即可访问。
/src 目录为项目源码。可以看css3如何写出下面的这些形状的。
/components/heart.vue 为css3实现爱心的组件一颗爱心，我们使用两个圆角的div 90°交叉，再通过一个div填补爱心下方的尖角。CSS3 transform: rotate(-45deg) 来旋转div进行交叉
<template>
<style>
.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);
}
/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>
<style>
.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;
}
花朵的叶子，用到 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>
风车的叶片旋转，很明显也是用到了 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);
}
}
三、运行效果
我自己是一名从事了多年开发的前端老程序员，，整理了一份最适合今年学习的前端学习干货，从最基础到高级的各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
閱讀更多 web小學員 的文章
