AI 助理
备案控制台
开发者社区 云计算 文章 正文

新年Html动态特效祝福送给你

2022-05-31 445
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 新年Html动态特效祝福送给你

1.数字爱心

b6c20d8560d5423daa011b999e4bf147.gif

这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,
每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的.


1.1 html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas爱心时钟</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/digit.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div style="text-align:center;margin-top:50px; font:normal 14px/24px 'MicroSoft YaHei';">
    <h2>HTML5 Canvas爱心时钟</h2>
<p>来源：IT邦德</a></p>
</div>
</body>
</html>


2.新年快乐

61a85499985747a08edbf86d5f2f7c55.gif


2.1 html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新年快乐HTML5特效</title>
    <link rel="stylesheet" href="css/hovertree.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <div class="hovertree" id="hovertree">
        <div class="hewenqiballoon">
            <div>
                <span>亲</span>
            </div>
            <div>
                <span>新</span>
            </div>
            <div>
                <span>年</span>
            </div>
            <div>
                <span>快</span>
            </div>
            <div>
                <span>乐</span>
            </div>
            <div>
                <span>!</span>
            </div>
        </div>
    </div>
    <canvas id="text" width="500" height="100"></canvas>
    <canvas id="stage" width="500" height="100"></canvas>
    <form id="form">
        <input type="submit" value="告别" /> <input type="text" id="inputText" value="2016" style="display:none" />
    </form>
    <script src='js/TweenLite.min.js'></script>
    <script src='js/easeljs-0.7.1.min.js'></script>
    <script src="js/hovertree.js"></script>
</body>
</html>


3.拆红包


image.png


3.1 html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>摇红包</title>
<link rel="stylesheet" href="css/csshake.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/zepto.min.js"></script>
<script src="js/red.js"></script>
</head>
<body>
<!-- 红包 -->
<div class="red"><!-- shake-chunk -->
    <span style="background-image: url(img/red-w.png);"></span>
    <button class="redbutton" type="button" id="hovertreeOpen">拆红包</button>
    <div class="red-jg">
        <h1 id="hwqKey">CSDN</h1>
        <h5 id="hwqValue">我喜欢你！</h5>
    </div>
</div>
<!-- End 红包 -->
<!-- 按钮 -->
<div class="t-btn">
    <button id="hewenqiAgain">再抽一次</button>
</div>
<!-- End 按钮 -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
    <script>
        function hoverTreeRandom(n) {
            return Math.floor(Math.random() * n + 1)
        }
        var hovertreePrize = new Array();
        hovertreePrize[0] = { "key": "恭喜您：", "value": "获得88元代金卷！" };
        hovertreePrize[1] = { "key": "恭喜您：", "value": "获得苹果八袋！" };
        hovertreePrize[2] = { "key": "祝愿您：", "value": "新年快乐，大吉大利！" };
        hovertreePrize[3] = { "key": "祝愿您：", "value": "笑口常开，天天开心！" };
        hovertreePrize[4] = { "key": "祝愿您：", "value": "心想事成，美梦成真！" };
        hovertreePrize[4] = { "key": "祝愿您：", "value": "事业顺利，财源滚滚！" };
        var h_index = 0;
        document.getElementById("hove"+"rtreeOpen").addEventListener("click", function () {
            h_index = hoverTreeRandom(hovertreePrize.length)-1;
            document.getElementById("hwqKey").innerText = hovertreePrize[h_index].key;
            document.getElementById("hwqValue").innerText = hovertreePrize[h_index].value;
        })
    </script>
</body>
</html>


4.元旦倒计时

image.png


5.Python代码

image.png

import turtle as t
# -*- coding: UTF-8 -*-
x = -200
y = 100
def txt():
    t1 = (x, y)
    t2 = (x + 12, y - 12)
    penSize = 5
    t.screensize(400, 400, "#fff")
    t.pensize(penSize)
    t.pencolor("#ff0000")
    t.speed(10)
    t.hideturtle()
    t.up()
    t.goto(t1)
    t.down()
    t.goto(t2)
    x1 = x - 18
    y1 = y - 22
    t3 = (x1, y1)
    t4 = (x1 + 60, y1)
    t.up()
    t.goto(t3)
    t.down()
    t.goto(t4)
    x2 = x1 + 16
    y2 = y1 - 10
    t5 = (x2, y2)
    t6 = (x2 + 8, y2 - 16)
    t7 = (x2 + 26, y2)
    t8 = (x2 + 18, y2 - 18)
    t.up()
    t.goto(t5)
    t.down()
    t.goto(t6)
    t.up()
    t.goto(t7)
    t.down()
    t.goto(t8)
    x3 = x1 - 15
    y3 = y2 - 24
    t9 = (x3, y3)
    t10 = (x3 + 90, y3)
    t.up()
    t.goto(t9)
    t.down()
    t.goto(t10)
    x4 = x3 + 10
    y4 = y3 - 22
    t11 = (x4, y4)
    t12 = (x4 + 70, y4)
    t.up()
    t.goto(t11)
    t.down()
    t.goto(t12)
    x5 = x + 12
    y5 = y3
    t13 = (x5, y5)
    t14 = (x5, y5 - 90)
    t.up()
    t.goto(t13)
    t.down()
    t.goto(t14)
    x6 = x5
    y6 = y5 - 90
    t15 = (x6 - 12, y6 + 10)
    t.goto(t15)
    x7 = x6 - 12
    y7 = y5 - 40
    t16 = (x7, y7)
    t17 = (x7 - 8, y7 - 20)
    t.up()
    t.goto(t16)
    t.down()
    t.goto(t17)
    t18 = (x7 + 24, y7 - 5)
    t19 = (x7 + 30, y7 - 16)
    t.up()
    t.goto(t18)
    t.down()
    t.goto(t19)
    x8 = x + 100
    y8 = y - 10
    t20 = (x8, y8)
    t21 = (x8 - 32, y8 - 20)
    t.up()
    t.goto(t20)
    t.down()
    t.goto(t21)
    t22 = (x8 - 40, y8 - 135)
    t.goto(t22)
    x9 = x3 + 100
    y9 = y3 - 8
    t23 = (x9, y9)
    t24 = (x9 + 50, y9)
    t.up()
    t.goto(t23)
    t.down()
    t.goto(t24)
    x10 = x9 + 24
    y10 = y9
    t25 = (x10, y10)
    t26 = (x10, y10 - 80)
    t.up()
    t.goto(t25)
    t.down()
    t.goto(t26)
    nian()
    kuai()
    le()
    t.done()
def nian():
    x1 = x + 180
    y1 = y - 10
    t1 = (x1, y1)
    t2 = (x1 - 18, y1 - 28)
    t.up()
    t.goto(t1)
    t.down()
    t.goto(t2)
    x2 = x1 - 8
    y2 = y - 25
    t3 = (x2, y2)
    t4 = (x2 + 60, y2)
    t.up()
    t.goto(t3)
    t.down()
    t.goto(t4)
    x3 = x2 - 8
    y3 = y - 65
    t5 = (x3, y3)
    t6 = (x3 + 65, y3)
    t.up()
    t.goto(t5)
    t.down()
    t.goto(t6)
    x4 = x3
    y4 = y3 - 25
    t7 = (x4, y4)
    t.up()
    t.goto(t5)
    t.down()
    t.goto(t7)
    x5 = x4 - 10
    y5 = y4
    t8 = (x5, y5)
    t9 = (x5 + 85, y5)
    t.up()
    t.goto(t8)
    t.down()
    t.goto(t9)
    x6 = x2 + 25
    y6 = y2
    t10 = (x6, y6)
    t11 = (x6, y6 - 120)
    t.up()
    t.goto(t10)
    t.down()
    t.goto(t11)
def kuai():
    x1 = x + 280
    y1 = y - 65
    t1 = (x1, y1)
    t2 = (x1 - 6, y1 - 25)
    t.up()
    t.goto(t1)
    t.down()
    t.goto(t2)
    x2 = x1 + 10
    y2 = y - 15
    t3 = (x2, y2)
    t4 = (x2, y2 - 130)
    t.up()
    t.goto(t3)
    t.down()
    t.goto(t4)
    x3 = x2 + 10
    y3 = y1 - 8
    t5 = (x3, y3)
    t6 = (x3 + 6, y3 - 10)
    t.up()
    t.goto(t5)
    t.down()
    t.goto(t6)
    x4 = x3 + 25
    y4 = y - 60
    t7 = (x4, y4)
    t8 = (x4 + 60, y4)
    t9 = (x4 + 60, y4 - 28)
    t.up()
    t.goto(t7)
    t.down()
    t.goto(t8)
    t.goto(t9)
    x5 = x4 - 10
    y5 = y4 - 28
    t10 = (x5, y5)
    t11 = (x5 + 90, y5)
    t.up()
    t.goto(t10)
    t.down()
    t.goto(t11)
    x6 = x4 + 30
    y6 = y2 - 5
    t12 = (x6, y6)
    t13 = (x6 - 18, y6 - 125)
    t.up()
    t.goto(t12)
    t.down()
    t.goto(t13)
    x7 = x6 + 8
    y7 = y5 - 20
    t14 = (x7, y7)
    t15 = (x7 + 12, y7 - 38)
    t.up()
    t.goto(t14)
    t.down()
    t.goto(t15)
def le():
    x1 = x + 510
    y1 = y - 20
    t1 = (x1, y1)
    t2 = (x1 - 65, y1 - 20)
    t3 = (x1 - 68, y1 - 60)
    t4 = (x1 + 10, y1 - 60)
    t.up()
    t.goto(t1)
    t.down()
    t.goto(t2)
    t.goto(t3)
    t.goto(t4)
    x2 = x1 - 30
    y2 = y1 - 35
    t5 = (x2, y2)
    t6 = (x2, y2 - 92)
    t7 = (x2 - 12, y2 - 85)
    t.up()
    t.goto(t5)
    t.down()
    t.goto(t6)
    t.goto(t7)
    x3 = x2 - 20
    y3 = y2 - 50
    t8 = (x3, y3)
    t9 = (x3 - 8, y3 - 20)
    t.up()
    t.goto(t8)
    t.down()
    t.goto(t9)
    t10 = (x3 + 40, y3 - 5)
    t11 = (x3 + 46, y3 - 16)
    t.up()
    t.goto(t10)
    t.down()
    t.goto(t11)
def xin():
    t.title('Happy New Year')
    # t.hideturtle()
    t.getscreen().bgcolor('#f0f0f0')
    t.color('#c1e6c6', 'red')
    t.pensize(2)
    t.speed(1)
    t.up()
    t.goto(0, -150)
    t.down()
    # t.begin_fill()
    # t.goto(0, -150)
    t.goto(-175.12, -8.59)
    t.left(140)
    pos = []
    for i in range(19):
        t.right(10)
        t.forward(20)
        pos.append((-t.pos()[0], t.pos()[1]))
    for item in pos[::-1]:
        t.goto(item)
    t.goto(175.12, -8.59)
    t.goto(0, -150)
    t.left(50)
    t.end_fill()
    t.done()
# xin()
txt()

image.png

关键词：
HTML祝福
HTML动态
HTML特效
IT邦德
目录
相关文章
疯狂的猿
|
4月前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码，动态点燃鞭炮动画祝福新年快乐，带新年背景音乐，无加密完整可用,源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面。
疯狂的猿
61 0
孙飞i
|
4月前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
孙飞i
84 4
疯狂的猿
|
5月前
动态粒子发射404网站HTML源码
动态粒子发射404网站HTML源码，粒子内容可以进行修改，默认是4，0数字还有一个页面不存在英文，可以自行修改，喜欢的朋友可以拿去使用，源码是html，记事本打开修改即可，鼠标双击可以运行
疯狂的猿
67 1
Want595
|
6月前
|
存储 移动开发 前端开发
HTML动态爱心
HTML动态爱心
Want595
107 1
sunrr
|
7月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式？
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式？
sunrr
122 1
孤留光乩
|
编译器
html动态爱心代码【三】(附源码)
html动态爱心代码【三】(附源码)
孤留光乩
655 0
疯狂的猿
|
7月前
生日快乐祝福HTML源码
2024生日快乐祝福HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面
疯狂的猿
124 0
生日快乐祝福HTML源码
土木林森
|
7月前
|
移动开发 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先，简述HTML5用于构建网页内容，CSS3用于描述样式。接着，分四步展示实现过程：1) 设计包含输入框和提示信息的表单结构；2) 使用CSS3创建样式，增强视觉效果；3) 使用JavaScript监听输入事件，动态验证表单并显示错误信息；4) 测试和调试确保跨平台兼容性。通过学习，开发者能掌握创建带验证功能的表单，提升用户体验。
土木林森
94 7
土木林森
|
7月前
|
编解码 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站，运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页，设计简洁易用，包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性，色彩搭配选用冷色调为主，辅以亮色点缀。字体选择清晰易读，布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南，为进一步功能扩展和优化打下基础。
土木林森
715 5
疯狂的猿
|
7月前
科技感十足的动态HTML源码
科技感十足的动态HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面
疯狂的猿
192 0

热门文章

最新文章

  • 1
    Python 爬虫必备杀器，xpath 解析 HTML
  • 2
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 3
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 4
    HTML（HyperText Markup Language，超文本标记语言）
  • 5
    太便利了 ！通义灵码方便生成html页面
  • 6
    HTML5 新的 Input 类型2
  • 7
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
  • 8
    HTML5 元素2
  • 9
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 10
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 1
    【HTML】——VSCode 基本使用入门和常见操作
    16
  • 2
    前端基础之HTML
    16
  • 3
    将html_table2结果转化为tibble的最佳实践
    34
  • 4
    利用 html_table 函数轻松获取网页中的表格数据
    33
  • 5
    HTML（HyperText Markup Language，超文本标记语言）
    62
  • 6
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
    47
  • 7
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
    63
  • 8
    html5 canvas五彩碎纸屑飘落动画特效
    35
  • 9
    HTML5 3D地球仪可按经纬坐标定位特效
    31
  • 10
    HTML5实现人机对战的国际象棋AI版
    30

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 2048小游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)