--- theme: cyanosis --- “PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：[春节创意投稿大赛](https://juejin.cn/post/7049181546682515464 "https://juejin.cn/post/7049181546682515464")” ## 写在开头体验地址先上为敬：[虎年主题网站](https://blog.ydydydq.top/webs/tiger/) 再附上源码以表诚意：[虎年主题网站-源码](https://gitee.com/ydydydq/tiger) （体验完你会给小编点个赞不？） ![14CCA34C.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ecf6481b65441dcbb3958521b0299db~tplv-k3u1fbpfcp-watermark.image?) ## 所用技术整个网站倒是没什么技术难点，做完给我感觉最困难、最麻烦的是各种素材和配色，真的令人头秃抓狂。下面稍微介绍用到的一些相关技术： `Vue3+Vite2`：用于快速开发，`Vite` 的快是众所周知的，用上了就等于爱上了，会无法自拔。
`Animate.css`：这是一个 `CSS3` 动画库，相信各位都不会太陌生了。
`JQuery`：会用到 `jquery` 主要是在雪景制作上，还有入场动画部分。
`Waypoints`：一个用来实现捕获页面各种滚动事件的 `JS` 工具库，挺好用的。剩下的一些页面效果就基本是手撸搞定，都不是很难，下面抽一些有意思的来介绍介绍。 ## 正文页面动画效果可能会比较多，为了第一眼看起来比较酷炫一点，俺左思右想，几乎是能加动画效果的地方，小编是一点都没放过。(＾ω＾) ### 大红门网站入眼就是一个大红门，本来理想中的样子是： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b604652025d47658d13c19158d3dac8~tplv-k3u1fbpfcp-watermark.image?) 但真实做出来却是： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0606e054f6ef406db2ad2e5ed5c4734e~tplv-k3u1fbpfcp-watermark.image?) 呃......只能说是朴实无华了，简约才大气，是吧？(^ω^) "福" 字效果是用 `CSS` 简单弄出来的，本来门锁部分想画个狮子头的，奈何功力有限，一直画不像，无奈只能随便找个图片顶一下了。 ``` // 一个"福"字

福

.fu{ margin-top: 10%; width: 120px; height: 120px; box-sizing: border-box; border: 6px solid #e5d0a6; transform: rotate(45deg); padding: 6px; box-shadow: 0 0 50px #e5d0a6; } .fu__1{ width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #e5d0a6; } .fu__2{ width: 100%; height: 100%; box-sizing: border-box; transform: rotate(-45deg); font-size: 70px; color: #e8d4ab; font-weight: bold; font-family: cursive; } .yd-flex-h-hC-vC { display: flex; justify-content: center; align-items: center; } ``` ### 入场动画页面主要看点应该就是每个元素的入场动画了。 ![2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7584205e12c4db99b10835bdb0d8cee~tplv-k3u1fbpfcp-watermark.image?) 而这使用的是 [animate.css](https://animate.style/) 库定义的一些动画，如标题的向下淡入动画： ``` .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDown { 1% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } ``` 写动画应该不难，但是，不是说直接把动画加在元素上就可以了，我们需要在合适的时机才给元素添加动画。而这个时机可以分为两种情况，一种是元素从打开页面时，就直接出现在可视区域内，另一种是元素一开始并没有出现在可视区域内，只有当我们往下滚动时才能见到。其实说到底就是来判断元素是否在可视区域内，如果在就添加动画，如果不在就不管。而这个判定过程，我们交给 [waypoints.js](http://imakewebthings.com/waypoints/) 库，下面我们先来看看它的基本使用方式。 > `waypoints` 基本使用： > ``` > > > > > > > >

>

橙某人

>

> > > > > > > ``` 写了个小 `Demo` 应该挺好理解吧？(^m^) 我们接着来看看下面这些代码： ``` var appMaster = { animateScript() { // this 会是每个元素本身 $('.scrollpoint.sp-effect1').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated fadeInLeft');}, { offset: '100%' }); $('.scrollpoint.sp-effect2').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated fadeInRight'); }, { offset: '100%' }); $('.scrollpoint.sp-effect3').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated fadeInDown'); }, { offset: '100%' }); $('.scrollpoint.sp-effect4').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated fadeIn'); }, { offset: '100%' }); $('.scrollpoint.sp-effect5').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated fadeInUp'); }, { offset: '100%' }); $('.scrollpoint.sp-effect6').waypoint(function () { $(this).toggleClass('active'); $(this).toggleClass('animated tada'); }, { offset: '100%' }); } }; $(document).ready(() => { // 延迟等待大红门效果结束 setTimeout(() => { appMaster.animateScript(); }, 500) }); ``` `jquery` 的一些基本用法就不多说，主要用来获取 `Dom` 元素，上面代码大概意思是先定义一些预置的类名。当我们需要给某个元素添加动画时，如给标题添加一个向下淡入动画：`scrollpoint sp-effect3` ```

传统文化

Traditional Culture

``` ![154E4A76.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/505cb8315e244676a0f5398579f8cfe4~tplv-k3u1fbpfcp-watermark.image?) ### 灯笼过年肯定少不了灯笼啦，红红的灯笼才有过年的氛围。 ![3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8a018f98e454c4b85dc6c5aa3a38144~tplv-k3u1fbpfcp-watermark.image?) 最近几天在掘金看到好多倔友都画了很好看的灯笼，咱也得来画一个凑凑热闹呀。 ``` ``` 整体来说这个灯笼用 `CSS` 画起来不难，关键点在于画弧度，就是要注意把握宽和高不一样长，然后添加 `border-radius` 属性即可画出不错的弧度，当然配色才是关键！！！ ### 阅读窗口 **阅读窗口** 这是一个可以放置大量内容的组件，一个网站总要有些内容，要不是没灵魂的。 (✪ω✪) ![4.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c846ae0307fb449c95fed2ee40d66001~tplv-k3u1fbpfcp-watermark.image?) 而它的实现原理也比较简单，如下图： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9d12f621c994330aa2224e353e78e0c~tplv-k3u1fbpfcp-watermark.image?) 看图应该也比较好明白吧？我们仅需控制内层元素 `contentContainer` 移动即可，而至于应该往上移动还是往下移动，我们可以再叠盖两个小块就能区分了。 ``` ``` ### 照片墙 **照片墙** 组件，呃...这...好像也没啥难度吧，就是摆放好看？哦，也不是，应该是素材好看？ ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0170addeda374b2facb9a44850100687~tplv-k3u1fbpfcp-watermark.image?) 好吧，不管如何，作为一名程序猿，咱还是得提一下代码才算走了流程，我们稍微来看看图中的六边形是如何做的？首先，我们以两个 `

` 元素来叠加再加上旋转，就能完成。 ```

橙某人

.main-box{ position: relative; width: 160px; height: 190px; margin-left: 50%; overflow: hidden; color: #fff; font-size: 20px; line-height: 190px; text-align: center; } .box{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; transform: rotate(120deg); } ``` 当然，这要控制好宽度和高度才行，得慢慢微调才行。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2690f75c8504d2e8e4cc13271caf0d4~tplv-k3u1fbpfcp-watermark.image?) 这样子我们可以得到一个红色的六边形，但是，这还没完，你发没发现图中的文字也被旋转了！这可不是我们想要的，我们再来增加一个 `

` 元素。 ```

橙某人

``` 再看，神奇的事情发生了，文字正回来了。其实这也没啥，就是刚好第三个 `

` 旋转了 `360°` 度，所以和没旋转一样。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ae9bf44f86f492b9e590b9262c1bcfb~tplv-k3u1fbpfcp-watermark.image?) 因为每个元素都是设置了 `absolute` 属性并旋转 `120°` 度，下一个元素会在上一个元素旋转了 `120°` 度的基础上再旋转 `120°` 度，所有第三个 `

` 元素一共会旋转了 `360°` 度，就是这么个原理了，最后记得把相关背景颜色去掉，就大功告成了。 ### 雪景 ![5.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b31bab0a75574a2595baaff21dfe1768~tplv-k3u1fbpfcp-watermark.image?) 而页面中雪景效果的实现，小编是直接在 `Github` 上拉一个 [snow.js](https://gist.github.com/irachex/1487067/ded4b529a10c6c761ffbdb88065e1690bd3831fc) 库实现的，比较简单，直接导入即可使用。不过，它依赖 `JQuery` 库，是比较老旧的技术了，现在用 `Canvas` 技术能更简单、方便地实现这种效果。 ![18EB659C.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53642e11b5c54f7e812f988049a25cbd~tplv-k3u1fbpfcp-watermark.image?) ### 轮播最后，要介绍的就是这个有点像3D的轮播效果了，它实现起来虽然不难，但是挺巧妙的。o(^▽^)o ![6.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/417409eded014c3680a66392a0682860~tplv-k3u1fbpfcp-watermark.image?) 我们先来看看它的结构和样式： ``` ``` 从上面代码可以看到，每张图片都是绝对定位的形式，如果在加上一些方向的定位信息再配合 `z-index` 我们就能让它呈现出3D层级的摆放，相信这难不到你。但是，这些属性我们不能直接写死在样式里，因为我们等等还需要切换，所以我们把它们写在 `JS` 逻辑处理中，如下： ```