【html + css】六一快乐

已于 2022-08-08 17:01:09 修改
阅读量1.2k 收藏 9
点赞数 3
分类专栏： bilibili视频源码 文章标签： 大数据 css html 前端
于 2022-07-07 21:20:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667397
版权

效果视频展示：

六一快乐

全部代码（放心粘贴）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<style>
body{
    background-repeat:no-repeat;
    background:url(https://tse1-mm.cn.bing.net/th/id/R-C.50d0fb4794acf13de18d7b5eb07422a2?rik=rYuzHE31tCW03g&riu=http%3a%2f%2fdl.ppt123.net%2fpptbj%2f51%2f20181115%2fahdeqqjf0fk.jpg&ehk=Gw2%2fkLQGUsPAIAUR4qjZJHogG%2b8FqQ0L%2bOaxCVKZVMg%3d&risl=&pid=ImgRaw&r=0);
    background-attachment: fixed;
}
.text{
    margin: 25%;
    position: absolute;
    
}
.text>p{
height: 80px;
width: 0.1ch;
margin: 0 auto;
font-size: 70px;
text-align: center;
animation: 4s typing forwards;
overflow: hidden;
}
.text>p:nth-child(2){
animation: typing 4s 2s forwards infinite;
}
@keyframes typing {
    from{width: 2ch;}
    to{width: 19ch;}
}
    .balloon {
  top: 100vh;
  opacity: 0.95;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 10rem;
  height: 10rem;
  border-radius: 10rem 10rem 4rem 10rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);
  -webkit-animation: float1 10s infinite ease-out;
          animation: float1 10s infinite ease-out;
}
@-webkit-keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@-webkit-keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}
@keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}
.balloon:after {
  content: '';
  position: absolute;
  bottom: -.05rem;
  right: -.05rem;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.9rem solid #dbbdbd;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 1rem;
}

.holder.back {
  position: relative;
  z-index: 2;
}
.holder.back .balloon:nth-child(1) {
  left: 50%;
  -webkit-animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.holder.back .balloon:nth-child(2) {
  left: 20%;
  -webkit-animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.holder.back .balloon:nth-child(3) {
  left: 90%;
  -webkit-animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 7.7s;
          animation-delay: 7.7s;
}
.holder.back .balloon:nth-child(4) {
  left: 70%;
  -webkit-animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.holder.back .balloon:nth-child(5) {
  left: 35%;
  -webkit-animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}

.holder.front {
  position: relative;
  z-index: 4;
}
.holder.front .balloon {
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 8rem 8rem 4rem rgba(153, 102, 102, 0.2);
}
.holder.front .balloon:nth-child(1) {
  left: 80%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.holder.front .balloon:nth-child(2) {
  left: 35%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.holder.front .balloon:nth-child(3) {
  left: 7%;
  -webkit-animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 7.7s;
          animation-delay: 7.7s;
}
.holder.front .balloon:nth-child(4) {
  left: 46%;
  -webkit-animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 6.3s;
          animation-delay: 6.3s;
}
.holder.front .balloon:nth-child(5) {
  left: 75%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 8.9s;
          animation-delay: 8.9s;
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
}

.holder.back>div:nth-child(1){
    background: yellow;
}
.holder.back>div:nth-child(2){
    background: orange;
}
.holder.back>div:nth-child(3){
    background: red;
}
.holder.back>div:nth-child(4){
    background: palevioletred;
}
.holder.back>div:nth-child(5){
    background: rgb(0, 255, 21);
}
.holder.back>div:nth-child(6){
    background: rgb(0, 17, 255);
}

.holder.front>div:nth-child(1){
    background: yellow;
}
.holder1.front>div:nth-child(2){
    background: orange;
}
.holder.front>div:nth-child(3){
    background: red;
}
.holder.front>div:nth-child(4){
    background: palevioletred;
}
.holder.front>div:nth-child(5){
    background: rgb(0, 255, 21);
}
.holder.front>div:nth-child(6){
    background: rgb(0, 17, 255);
}
</style>
<body>
    <div class="holder back">
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
      </div>
    <div class="text">
        <p class="animate__bounce animate__infinite	infinite">图图祝大朋友和小朋友们</p>
        <p class="animate__bounceInLeft">儿童节快乐</p>
    <div class="holder front">
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        <div class="balloon"></div>
        </div>
    </div>
</body>
</html>

阡小年
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML做一个节日页面【六一儿童节】纯HTML代码
HTML网页设计
08-07 601
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网......
儿童节快乐的html+css
最新发布
06-19
儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css儿童节快乐的html+css...
Java Swing花样玩法：教你用代码制作六一儿童节的精美贺卡（简单版）
VLOKL的博客
06-04 903
Java Swing花样玩法：教你用代码制作六一儿童节的精美贺卡（简单版）
庆祝“六一儿童节”C++代码
WTC20120518的博客
06-03 730
NO
#【六·一】让代码创造童话，共建快乐世界# 庆祝儿童节的Html和Python代码
pyz258的博客
06-05 811
庆祝儿童节的Html和Python代码
六一儿童节礼物（Python中turtle实现）
weixin_46039719的博客
06-01 1318
🐳六一儿童节快乐🙉 🐠Python代码实现（好玩的海龟turtle）📝 🐤送给小朋友的节日小故事🎁
六一儿童节，用python送个小礼物（附代码）
lovenankai的专栏
06-01 7052
今天是六一儿童节，用python画了一个多啦A梦 送给小朋友们。祝福孩子们快乐成长，具体如下：Python中引入了一个非常好用的画图内置库，Turtle，直接使用imp...
html+css+js 生日快乐网站模板（多页面功能版本+音乐）
07-31
【HTML+CSS+JS 生日快乐网站模板：构建互动式庆祝平台】 HTML（HyperText Markup Language）是网页设计的基础，用于定义网页的结构和内容。在这个生日快乐网站模板中，HTML 文件将承载着所有文本、图像和其他媒体...
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
龙年快乐.zip html+jss+css
01-22
【标题】"龙年快乐.zip" 是一个包含HTML、JavaScript和CSS技术的压缩包，它专为2024年龙年设计，旨在提供一种庆祝龙年的互动或展示方案。这个压缩包可能包含了用于创建动态网页或者节日主题网站的相关文件。 【描述...
儿童节快乐模板下载
08-24
儿童节快乐模板下载
HTML+CSS+JS 春节倒计时跳转烟花特效
02-20
【HTML+CSS+JS 春节倒计时跳转烟花特效】是一个综合性的网页开发项目，结合了HTML、CSS和JavaScript技术，旨在为用户呈现一个富有节日氛围的互动体验。这个项目有两个主要部分：春节倒计时和烟花特效。 首先，HTML...
惊艳全场！我用代码编写了最酷炫的六一庆祝程序！
m0_73552311的博客
05-31 483
记得小时候的六一儿童节，老师会给我们发水果，颁发表扬状，然后送我们去挤公园。但随着年龄的增长，我们离经叛道的思想也渐渐地显露出来，开始追逐更具人格魅力的追求。于是，现在的我们就成了，一群热爱编程，追求科技潮流的程序员。既然是六一儿童节，我们怎么能落下一份程序的儿童节礼物呢？
用python带孩子过一个快乐的“六一”
Python爱好者的专栏
06-02 3590
这个周末是六一，笔者分享一下给孩子做的一个小程序，这样的例子需要有趣、简单有动画效果，所以我就用python的dash_bio给孩子展示了DNA的分子结构，效果不错：） dash_bio库的安装· 首先是安装dash_bio库，他的例程是基于python2.7的，不过python3应该也行，稍微改一下代码即可。执行下列语句即可完成安装。这其中没遇...
HTML期末设计——代码篇HTML做一个节日页面【六一儿童节】纯HTML代码
qq_524614081的博客
12-17 96
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨
六一儿童节到了，超炫酷的烟花（网页特效）
weixin_46039719的博客
05-30 1246
目录 💝 浮世万千 💝 炫酷展现 💝代码实现 💝 浮世万千 先手写一遍，然后键盘敲出来，最后代码敲出来，超级炫酷的那种...... 飞鸟集中的一句话，改编的一首诗是过样的: 浮世万千，吾爱有三，日月与卿: 日为朝，月为暮，卿为朝朝暮暮。 'I love three things in this world,', 'the sun ,the moon and you.', 'The sun for the day,', 'the moon for the night,', '
童年的游戏，Python一行代码就能玩
早起Python
05-30 1728
大家好，儿童节就要来了，虽然秃头程序员没有头发，但是童心还是一直都在的，今天就分享一个私藏的GitHub项目——free-python-games，一行代码就能进入使用Python开发的小游戏快乐玩耍！ 安装与使用 安装当然也很简单一行代码就可以 pip install freegames 由于该项目中的所有游戏均是基于Python内置模块Turtle制作，所以没有太多依赖，安装不会有困难。 安装完之后我们可以使用python -m freegames list来查看所有的游戏列表..
用html+css+js编写一个六一快乐的动态页面
06-01
好的，我可以为你提供一个简单的六一快乐动态页面示例，代码如下： ```html <!DOCTYPE html> <html> 六一快乐！ <style type="text/css"> body { background-color: #55acee; } h1 { color: #fff;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值