网站来点圣诞气氛?

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

上 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 引用
  • 组件
    10 引用 • 28 回帖
  • 前端

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

    245 引用 • 1338 回帖 • 2 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • OpenCV
    15 引用 • 36 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    129 引用 • 862 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1794 回帖 • 1 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 603 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    168 引用 • 3834 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 292 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 7 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 541 回帖 • 1 关注
  • 微软

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

    8 引用 • 44 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 589 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    364 引用 • 1840 回帖 • 2 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    171 引用 • 414 回帖 • 375 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 439 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 635 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 92 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • SQLServer

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

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

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 462 关注
  • Outlook
    1 引用 • 5 回帖 • 2 关注