520特辑———旋转爱

  520:网络情人节是信息时代的爱情节日,定于每年的5月20日和5月21日。该节日源于歌手范晓萱的《数字恋爱》中“520”被喻成“我爱你” ,以及音乐人吴玉龙的网络歌曲中“我爱你”与“网络情人”的紧密联系。后来,“521”也逐渐被情侣们赋予了“我愿意、我爱你”的意思。“网络情人节”又被称为“结婚吉日”、“表白日”、“撒娇日”、“求爱节”。
  那么,作为程序员,如何通过专业技能向自己的另一半表达爱意呢?

效果

520

技术栈

技术栈[及环境] 版本
vue-cli 3.x
vue 2.x
element-ui 2.x
sass scss

实现

分析

  1. 不难看出,页面分为三个部分:背景、旋转导航花瓣及弹框;
  2. 6个花瓣对应对个导航栏,每个导航栏颜色及打开弹窗的背景色相同;
  3. 弹窗共用,动态展示不同的弹窗内容区域及改变标题即可;
  4. 动画:这里动画均有原生css3的@keyframes完成,在animation里调用。

功能点

  • 导航切换
  • 旋转动画
  • 走马灯(相册轮播)
  • 标签切换(足迹中标签)
  • table表格(说说)
  • 时间轴(时刻)
  • 弹幕效果(留言)
  • 缩放效果(中心图片点击缩放)

项目一览

项目结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── README.md	// 项目说明
├── babel.config // babel配置
├── package.json // 包配置
├── public
│ ├── favicon.ico // 放在title前的页面logo
│ └── index.html // 主页面
├── src
│ ├── assets
│ │ ├── css // 自定义配置css
│ │ └── love // 图片资源
│ ├── love
│ │ └── love.vue // 520主题组件
│ ├── App.vue
│ ├── router.js // 路由
│ └── main.js // 主配置
└── vue.config.js // vue自定义配置

其中,项目重点在love.vue组件中

功能点简述

1. 导航及切换

导航切换效果

首先,6个导航位,文字不同,icon不同;
其次,点击菜单需要有旋转效果,菜单旋转缩小,弹框旋转放大展示;
最后,判断/写入弹框卡片(下简称卡片)背景色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// template 部分
<div class="leafs">
<div v-for="(item, index) in menuList"
:key="item.name"
class="leaf"
@click="runCircle(item.name, index)"
:class="`leaf${index+1}`">
<img :src="item.url" alt="">
<span class="nameSpain"><i :class="item.icon"></i> {{ item.name }}</span>
</div>
<!-- 小心心 -->
<div class="heart"
:class="{heartScale: heartScaleSign}"
@click="heartScale">
<img src="../assets/love/heart.png" alt="">
</div>
</div>


// script部分
data() {
return {
show: false,
runCircleSign: false, // 旋转变小
heartScaleSign: false, // 心 变大缩小
cardMiss: false, // 卡片动画消失
showCard: false, // 卡片显示状态
cardName: '', // 卡片title
cardChange: -1, //切换卡片
cardGround: '', // 卡片背景色
menuList: [
{
url: require('../assets/love/leaf1.png'),
icon: 'el-icon-picture-outline',
name: '相册'
},
{
url: require('../assets/love/leaf2.png'),
icon: 'el-icon-location',
name: '足迹'
},
{
url: require('../assets/love/leaf3.png'),
icon: 'el-icon-edit',
name: '说说'
},
{
url: require('../assets/love/leaf4.png'),
icon: 'el-icon-date',
name: '时刻'
},
{
url: require('../assets/love/leaf5.png'),
icon: 'el-icon-news',
name: '留言'
},
{
url: require('../assets/love/leaf6.png'),
icon: 'el-icon-printer',
name: '影集'
}
],
cardType: 0,
menuIndex: -1,
activeName: 'first', // 当前标签
}
},
methods: {
// 菜单缩放
runCircle (name, index) {
let _this = this;
// 缩放
this.runCircleSign = ! this.runCircleSign;
this.menuIndex = index;
// 赋值名称
this.cardName = name;
// 显示卡片
this.showCard = true;
// 卡片颜色
switch (index) {
case 0:
_this.cardGround = 'rgba(129,15,175,0.4)';
_this.cardType = 0;
break;
case 1:
_this.cardGround = 'rgba(12,136,145,0.6)';
_this.cardType = 1;
break;
case 2:
_this.cardGround = 'rgba(255,235,45,0.6)';
_this.cardType = 2;
break;
case 3:
_this.cardGround = 'rgba(196,0,83,0.6)';
_this.cardType = 3;
break;
case 4:
_this.cardGround = 'rgba(87,174,157,0.6)';
_this.cardType = 4;
break;
case 5:
_this.cardGround = 'rgba(255,125,0,0.6)';
_this.cardType = 5;
break;
}
},
// 心 缩放
heartScale () {
this.heartScaleSign = ! this.heartScaleSign;
},
// 消失卡片 && 菜单复原
backSign () {
let _this = this;
_this.cardMiss = true;
_this.runCircleSign = ! _this.runCircleSign;
setTimeout(() => {
_this.showCard = false;
_this.cardMiss = false;
}, 3000)
},
},
2. 弹幕效果

留言弹幕效果

1.输入内容;
2.循环展示;
3.随即高度及标签颜色;
4.利用本地存储持久化;
5.动画漂移效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// template
<div class="haveWords">
<!-- 展示内容 -->
<div class="cont">
<el-tag v-for="el in ku"
:key="el.id"
class="fly"
:type="el.type"
:style="{top:el.top + 'px'}"
>
{{ el.msg }}
</el-tag>
</div>
<!-- 输入内容 -->
<div class="dealBox">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 5}"
placeholder="请输入留言"
v-model.trim="msg"
size="small">
</el-input>
<el-button type="primary" size="small" @click="sendData">Biu~</el-button>
</div>
</div>


// script
data() {
return {
msg: null, //缓存
ku: JSON.parse(localStorage.kuArr), //存取数据
msgKu: []
}
},
methods: {
// 弹幕
sendData () {
// 5中标签模式
let typeArr = ['','success','info','warning','danger'];
let localArr = this.ku;
//判空 不为空则继续 为空则提示输入
if(this.msg !== '' && this.msg !== null) {
let num1 = Math.random() * 500;
let num2 = Math.random() * 5;
let arrMark = Math.floor(num2);
let top = Math.floor(num1);
let obj = {msg:this.msg,top:top,type:typeArr[arrMark]};
localArr.push(obj);
localStorage.kuArr = JSON.stringify(localArr);
this.msg = "";
} else {
this.$message.warning('要先输入哦~');
}
},
},

  别的功能点基本上都是element-ui中组件自带或基于组件开发的,熟悉element-ui的小伙伴应该极为熟悉。有感兴趣的朋友可自行去element-ui官网学习。element飞机票

  有对本demo感兴趣的或者想要作者源码的可以关注公众号流眸,回复“520源码”拿到代码哦~
扫码关注公众号

---本文结束感谢您的阅读---

本文标题:520特辑———旋转爱

文章作者:Lomo 朱幸民

发布时间:2019年05月20日 - 13:55:53

最后更新:2019年05月20日 - 15:36:49

原始链接:https://www.zhuxingmin.com/2019/05/20/520特辑———旋转爱/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%