送你个学习赏花的系统!把妹的第一步哦

2,025 阅读3分钟

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

213317.70066503.jpg

前言

八目尚善,赏花赏月赏秋香。这是星爷【唐伯虎点秋香】的电影中的一个对对子环节。而春节逛花市是必不可少的环节,而赏秋香的第一步就是学会赏。相信我,看完这篇文章,你保证可以找到另外一半或者与另一半更加幸福美好。

你想想,当**你跟你的另一半**,或者跟**你的暗恋对象**去逛花市的时候。~~也有可能你没有,但是也可以自己去嘛!完全不影响。~~这时候!你的另一半问你这花是什么花、摆在哪、怎么摆。你要是一问三不知,那你估计就凉凉了。

所以作为你的兄弟我,借助这个机会,我就带你认识一下花市里面都有哪些花,叫什么名字,这些花摆在哪,怎么摆。能不能把握住另一半就靠你自己了,兄弟我只能帮你到这里了,我不需要其他的,就要一个小小点赞就好了。没有另外一半的就当做提前学习以后用的上

赏花系统

又到了我切图仔工作的时候了,吐槽一下:每次找页面UI真的痛苦,这次还要找很多元素。给大家讲一下大致的设计思想,给大家看一下大致一些效果。

下面的我都不演示代码了,代码都在码上掘金工具上,大家可以一一去看。

实现下雪效果

首先实现下雪效果以及新年的背景,很多人现实中都没看过(就比如我)。那么我们肯定不能吝啬,冬天嘛下雪才是正确的。

ScreenRecorderProject5.gif

原理:使用cavans粒子+动画原理实现简单的下雪效果,没有什么硬核技术。你也可以实现

实现魔方旋转效果

这次我们使用3d正方形来展示我们的图片,魔方的每一面都有我对大家的新年祝福。同时希望大家能够在新的一年找到心仪的另一半,不要每年都被催婚哦。

ScreenRecorderProject6.gif

需要注意的是:左下角会介绍当前是什么花。每个魔方的祝福图片都是随机的,我给大家找了十个左右可爱的素材

未命名图片.png

原理:使用div+css拼接成一个3d的正方形,每一面都有自己的背景图。使用js鼠标悬浮功能,控制魔方的旋转方向。

实现鲜花的展示

当你悬浮到每个魔方进去之后,可以点击魔方,进行对应的鲜花介绍页。分别介绍鲜花的基础信息以及摆放位置。

ScreenRecorderProject7.gif

总结

整体的设计思想就是这样的,学会赏花之后,下一步就是赏月,这个等中秋节的时候,我再细节教大家怎么赏月。敬请期待吧。学会赏花,过年好回去装逼一下,说不定心仪的女人就喜欢上你了哦。如果你觉得对你有帮助或者有趣,给我点个赞呗,谢谢啦

以下是整体的代码演示