专栏首页AlbertYang的编程之路十分钟实现节日祝福动画,CSS+JavaScript实现元旦祝福动画,祝大家元旦快乐

十分钟实现节日祝福动画,CSS+JavaScript实现元旦祝福动画,祝大家元旦快乐

参考代码

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>元旦快乐:公众号AlbertYang</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <div class="box">
        <dic class="circle">
          <div class="text">
            <span style="--x:0">元</span>
            <span style="--x:1">旦</span>
            <br />
            <span style="--x:2">快</span>
            <span style="--x:3">乐</span>
          </div>
        </dic>
      </div>
    </section>
    <script>
      const bubbles = () => {
        let count = 300;
        let section = document.querySelector("section");
        for (let i = 0; i < count; i++) {
          let bubble = document.createElement('i');
          let x = Math.floor(Math.random() * window.innerWidth);
          y = Math.floor(Math.random() * window.innerHeight);

          let size = Math.random() * 60;
          bubble.style.left = x + 'px';
          bubble.style.top = y + 'px';
          bubble.style.width = size + 'px';
          bubble.style.height = size + 'px';
          bubble.style.animationDuration = 5 + size + 's';
          bubble.style.animationDelay = -size + 's';

          section.appendChild(bubble);
        }
      }
      bubbles()
</script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f1f1f1;
}

section .box {
  position: absolute;
  width: 450px;
  height: 450px;
}

section .box .circle {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fff, #e4e3e8);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

section .box .circle::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  background: linear-gradient(315deg, #fff, #e4e3e8);
  border-radius: 50%;
  z-index: 1;
}

section .text {
  position: absolute;
  font-size: 6em;
  color: #ff2a2a;
  z-index: 2;
}

section .text span {
  display: inline-block;
  animation: blink 3s 2s infinite;
  animation-delay: calc(var(--x) * 0.5s);
}

section i {
  position: absolute;
  background: #FF2A2A;
  border-radius: 50%;
  animation: animate linear infinite;
}

section i:nth-child(even) {
  background: transparent;
  border: 1px solid #FF2A2A;
}

@keyframes animate {
  0% {
    transform: translateY(0);
    opacity: 0;
    filter: hue-rotate(0deg);
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-3000%);
    opacity: 0;
    filter: hue-rotate(36000deg);
  }
}

@keyframes blink {
  0% {
    transform: scale(0);
    opacity: 0;
    filter: hue-rotate(0deg);
  }

  30%,
  50%,
  80% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
    filter: hue-rotate(3600deg);
  }
}

本文分享自微信公众号 - AlbertYang(AlbertYang666),作者:Albert

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 视频祝福重磅回归,不止是新春拜年!

    今年过年特别早,鹅厂的新年晚会在昨天圆满落幕啦~ ? 乘风破浪,明年又是充满希望的一年~ 不知道大家的年会筹备怎么样啦? ? 据说用乐享的大屏幕抽奖,中奖率更...

    腾讯乐享
  • 新年快到了,满屏的新年祝福弹窗,让人又惊又喜,即使电脑崩溃了,也是高兴的——新年祝福弹窗,了解一下。

    记得在之前有发过一篇祝福弹窗的文章,有人就抱怨说,文章发表落后了,过了节日之后才发,有点慢,应该提前发表的。对于这个请求,我是一定会满足各位的。这不是快要到圣诞...

    大家一起学编程
  • 超硬核表白:小学生这样为祖国打Call!

    ? 祖国七十华诞即将来临 你能想到为祖国庆生最硬核的方式有哪些? 有人组织了一场快闪行动,唱出对祖国的赞歌 ▼ ? ‍ 有人用无人机拼出对祖国深沉的爱 ▼ ...

    鹅老师
  • 页面滚动效果库,有点儿皮

    前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css,内置了很多常用的 CSS 动画,可以一行代码让页面动起来。

    程序员鱼皮
  • 超实用!2021运营日历发布,社区活跃就靠它!

    节假日到来之前,其他岗位的同事: ? 运营的同事: ? 节假日对运营人来说,正是要做活动、搞气氛、追热点、促活跃的时候,也正是最忙碌的时候。 为了在新的一年里...

    腾讯乐享
  • 设计策略 | QQ为我画年画

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 春节作为我国最盛大的传统节日,历经长期的传承和发展,已逐步形成了各地方,各民族稳定...

    腾讯ISUX
  • 怎么渡过2018年剩下的3天?

    除此之外呢,很多公司都会举办年终总结会,进行年终征文。回顾过去,展望未来,让自己的心意沉淀在乐享,在后一年再回首时,会再是一番滋味。

    腾讯乐享
  • 久等了,暖心的「员工关怀」上线了!

    同事过生日,部门群里如果有人提到,清一色的一片蛋糕落下,乐享产品组三个产品经理竟同一天生日,同事纷纷表达自己的祝福!

    腾讯乐享
  • 新年快到了,满屏的祝福弹幕,可自由控制弹框文字

    正所谓授人以鱼不如授人以渔,这次把弹框的制作方法给大家讲清楚。然后让大家自己去动手制作自己想要的弹框。

    大家一起学编程
  • 暖心创意,本田为生病儿童带去AR冬季仙境体验

    VRPinea
  • 程序猿一定要知道的&过年&习俗

    农历正月初一是春节,又叫阴历(农历)年,俗称“过年”。这是我国民间最隆重、最热闹的一个古老传统节日。春节是汉族最重要的节日。 今天是大年三十 辛辛苦苦忙了一年...

    互扯程序
  • Node.js 开发者,新年快乐!

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时

    五月君
  • 趣味答题、论坛集赞,端午在乐享这么玩!

    ? 端午节要到了,乐乐今儿想给大家分享几个关于端午节的冷知识: 01 今年的端午节,是21世纪最晚的一次。(与2001、2058年并列,阳历为6.25) 0...

    腾讯乐享
  • python 做一个生日游戏

    叶子陪你玩
  • 父亲节:程序员硬核示爱,“爸”气告白!

    2020年06月21日 星期日 (庚子年(鼠年)五月初一,也就是明天,这一天也是父亲节。父亲节(Father's Day),顾名思义是感恩父亲的节日。约始于二十...

    民工哥
  • 【UPUP牛】QQ牛年生肖潮玩系列设定故事

    一、项目背景 腾讯生肖公仔是腾讯每逢新年皆会重推的礼品,也是QQ作为企业IP的重要形象拓展。2021牛年生肖公仔,ISUX的设计师研发了具有潮流味道的QQ牛系...

    腾讯ISUX
  • QQfamily新春福卡爆款的企划

    又到一年春节时,年年春节多相似,今年春节QQfamily怎样玩点不一样的概念呢?在新年的时候,总会有很多人挑选吉日去寺庙祈福许愿,给自己一个好彩头,不如我们就来...

    腾讯ISUX
  • 就地过年,11种玩法让员工感受公司关怀

    根据中国国家铁路集团的统计,今年春运前三天的客流量仅为去年同期的四分之一,这意味着就地过年的人们不在少数。 这不,鹅厂的乐问上, 已经有同事开始“掉眼泪”了:...

    腾讯乐享
  • 晒截图,赢视频VIP和萌宠公仔|12月享礼月·第1弹

    12月刚开始,乐乐的朋友圈里都是朋友们的许愿求好运:“12月请对我好一点”。大家有没有许愿2020最后一个月好运降临呢? ? 乐乐今天为陪伴了腾讯乐享又一年...

    腾讯乐享

扫码关注云+社区

领取腾讯云代金券