学习
实践
活动
工具
TVP
写文章
专栏首页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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:Albert
原始发表时间:2020-12-31
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 用Python发新年00:00祝福语(除夕晚上直接用!)

    2022年的新年即将来临,这里用Python写一串简单的代码来实现定点给微信里的所有小伙伴发祝福语!!

    秃头程序员
  • 新年快到了,满屏的新年祝福弹窗,让人又惊又喜,即使电脑崩溃了,也是高兴的——新年祝福弹窗,了解一下。

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

    大家一起学编程
  • 视频祝福重磅回归,不止是新春拜年!

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

    腾讯乐享
  • 2017,为你们实现一个新年愿望

    腾讯云安全
  • 前端开发:使用HTML5简单实现嫦娥奔月动画

    在中秋佳节即将到来之际,作为程序员的一员,除了享受传统习俗:赏月、吃月饼、与家人团圆之外,更应该体现出程序员该有的风貌才行,那么本文就来通过前端知识来实现与中...

    三掌柜
  • 你知道刷一刷红包预热H5背后—设计在弄啥嘞?— 腾讯ISUX

    腾讯ISUX
  • 父亲节:程序员硬核示爱,“爸”气告白!

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

    民工哥
  • 新年快到了,满屏的祝福弹幕,可自由控制弹框文字

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

    大家一起学编程
  • 中秋特别文章——css实现海上升明月

    想了好久都没想到什么好的创意,刚好今天想到了一句诗,海上生明月,天涯共此时。由此引发了一些思路,特意做出来和大家分享一下。

    十里青山
  • Maui Shell 来了,开启 Linux 桌面新时代!

    2017 年,一个基于 Ubuntu 打造的 Linux 桌面系统 - Nitrux 横空出世,被众多开发者誉为是有史以来最为惊艳的 Linux 桌面版。

    GitHubDaily
  • python实现微信提醒机器人

    最近微信群里朋友们聊天,年纪大了需要养生了,每天八杯水~想着是否可以实现一个微信机器人每天定时给群内发消息提醒喝水的功能。

    languageX
  • 设计策略 | QQ为我画年画

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

    腾讯ISUX
  • .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板...

    依乐祝
  • YourBatman用趣味代码雨祝你:端午安康

    端午节(也叫粽子节)与春节、清明节、中秋节并称为中国民间四大传统节日,一直延续至今。

    YourBatman
  • 亿级曝光品牌视频的幕后设定

    2019年春节期间,QQ红包运营活动进行了全新改版,将卡券福利、现金奖励打包成福袋形式,并通过年俗小游戏及共享福袋的玩法吸引更多用户参与。在点击福袋进入小游戏的...

    腾讯ISUX
  • Demoo – 为移动端方案设计演示而生 - 腾讯ISUX

    腾讯ISUX
  • Android-Animation 总结(一)

    鉴于今天是劳动节,鼓励自己整理一下android相关的知识,祝所有劳动者节日快乐。

    android_薛之涛
  • 用 SVG 描边动画送一份平安夜祝福

    SVG 是用 Illustrator 画的,苹果是手绘的(虽然是画的丑了点 0.0)。

    神说要有光zxg

扫码关注腾讯云开发者

领取腾讯云代金券