网站来点圣诞气氛?

本贴最后更新于 1545 天前,其中的信息可能已经渤澥桑田

上 codepen 找了一圈灵感.....

<template> <div> <div class="container"> <div class="text">Merry Christmas, Friends!</div> <div class="presents"> <div class="present orange"> <div class="lid"></div> <div class="box"></div> <div class="bow"></div> <div class="ribbon"></div> </div> <div class="present blue"> <div class="lid"></div> <div class="box"></div> <div class="bow"></div> <div class="ribbon"></div> </div> <div class="present green"> <div class="lid"></div> <div class="box"></div> <div class="bow"></div> <div class="ribbon"></div> </div> </div> </div> </div> </template> <script> // 记得引入 mojs export default { data() { return { timer: null, } }, mounted() { this.timer = setInterval(() => this.randomizedConfetti(), 500) }, methods: { randomizedConfetti() { let randomX = Math.floor(Math.random() * (document.body.clientWidth - 300) + 0) let randomY = Math.floor(Math.random() * (window.innerHeight - 300) + 0) // eslint-disable-next-line no-undef const burst = new mojs.Burst({ left: 0, top: 0, radius: { 0: 200 }, count: 20, degree: 360, children: { fill: { white: '#f67280' }, duration: 2000, }, }).tune({ x: randomX, y: randomY, }) burst.replay() }, }, beforeDestroy() { clearInterval(this.timer) this.timer = null }, } </script> <style lang="scss" scoped> @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap'); $border-color: #2c3a49; $border: 4px solid $border-color; $border-radius: 5px; html, body { overflow-x: hidden; } .container { position: fixed; top: 50%; left: 50%; z-index: 1000; transform: translate(-50%, -50%); } .text { min-width: 100%; text-align: center; color: #fda639; // color: #ffe211; font-family: 'Fredoka One', cursive; text-shadow: 1px 1px $border-color; font-size: 3em; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); transform: translateY(-50px); opacity: 0; animation-name: titleAnimation; animation-timing-function: ease; animation-duration: 3s; animation-delay: 0.6s; animation-fill-mode: forwards; } .presents { opacity: 0; animation-name: titleAnimation; animation-timing-function: ease; animation-duration: 3s; animation-delay: 1.1s; animation-fill-mode: forwards; display: flex; justify-content: center; align-items: flex-end; height: 200px; } @keyframes titleAnimation { 0% { transform: translateY(-50px); opacity: 0; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); } 20% { transform: translateY(0); opacity: 1; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); } 100% { transform: translateY(0); opacity: 1; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); } } .text .char { animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both; animation-delay: calc(60ms * var(--char-index)); } @keyframes slide-in { from { transform: translateY(-1em) rotate(-0.5turn) scale(0.5); opacity: 0; } } @mixin present($name, $positionx, $box-color, $bow-color, $dot-color, $width, $height, $z-index) { position: relative; left: $positionx; width: $width; height: $height; z-index: $z-index; &:hover { animation: 0.5s #{$name}; } .lid { background: $box-color; } .box { background-image: radial-gradient($dot-color 20%, transparent 20%), radial-gradient($dot-color 20%, transparent 20%); background-color: $box-color; } .ribbon { background: $bow-color; &::before { top: 21%; } } .bow { background: $bow-color; &::before, &::after { background: $bow-color; } } @keyframes #{$name} { 0% { width: $width; height: $height; } 30% { width: calc(#{$width} + 10px); height: calc(#{$height} - 10px); } 60% { width: calc(#{$width} - 10px); height: calc(#{$height} + 10px); } 100% { width: $width; height: $height; } } } .green { @include present('green', -20px, #3ddc81, #f75d4c, #fff, 100px, 100px, 1); } .orange { @include present('orange', 20px, #ffa726, #f75d4c, $border-color, 130px, 120px, 10); } .blue { @include present('blue', 0, #1bb5fe, #3ddc81, transparent, 120px, 160px, 0); } .present { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; .lid { height: 20%; width: calc(100% + 10px); border: $border; border-radius: $border-radius; box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), 5px 0 rgba(0, 0, 0, 0.15); } .box { width: 100%; height: 100%; background-position: 0 0, 20px 20px; background-size: 40px 40px; border: $border; border-top: 0; border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; box-shadow: inset -10px 5px rgba(0, 0, 0, 0.3), 5px 0 rgba(0, 0, 0, 0.15); } .ribbon { position: absolute; top: -3px; width: 30px; height: calc(100% - 5px); border: $border; border-radius: $border-radius; box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5); &::before { display: block; content: ''; position: absolute; width: 100%; height: 5px; background: rgba(0, 0, 0, 0.3); } } .bow { position: absolute; top: -20px; width: 20px; height: 20px; border: $border; border-radius: 50%; box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), inset -2px -5px rgba(0, 0, 0, 0.3); &::before, &::after { display: block; content: ''; position: absolute; top: -10px; width: 30px; height: 30px; border: $border; border-radius: 50%; box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), inset -2px -5px rgba(0, 0, 0, 0.3); z-index: -1; } &::before { left: 15px; } &::after { right: 15px; } } } </style>
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    267 引用 • 666 回帖 • 1 关注
  • 圣诞
    1 引用
  • 组件
    10 引用 • 28 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    245 引用 • 1338 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 759 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 18 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 160 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    56 引用 • 25 回帖 • 5 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 3 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 157 关注
  • AWS
    11 引用 • 28 回帖 • 11 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 92 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 204 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 1 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 3 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 68 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9314 引用 • 42389 回帖 • 115 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • Word
    13 引用 • 40 回帖
  • abitmean

    有点意思就行了

    29 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    498 引用 • 1395 回帖 • 260 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 40 回帖