怎么用js代码实现生日快乐特效
发表于：2024-11-20 作者：千家信息网编辑
千家信息网最后更新 2024年11月20日，本篇内容介绍了"怎么用js代码实现生日快乐特效"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1.js
千家信息网最后更新 2024年11月20日怎么用js代码实现生日快乐特效
本篇内容介绍了"怎么用js代码实现生日快乐特效"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1.js代码运行环境
浏览器(引擎)
node(基于v8渲染js)
webview(v8引擎)
2.js生日快乐代码
.button-style1 ,.button-style2{position:absolute;top:41%;opacity:1;z-index:100;}.button-style1 {position:absolute;left:20%;animation:btn1 15s; /*这是CSS3的动画属性，着这里定义动画的名称和持续时间，也可以用animation-delay定义动画延时多少s播放*/}.button-style2 {position:absolute;left:68%;animation:btn2 15s;}@keyframes btn1 { /*这里是对动画的定义，我们只需要定义几个关键帧，它会自动完成补间。*/0% { opacity:0; left:43.5%;}70% { opacity:0; left:43.5%;}100% { opacity:1; left:20%;}}@-webkit-keyframes btn1 { /*这里是声明获取不同浏览器的支持，还有几个干脆我就懒得写了，反正我也不是给所有人写的，自己能看就行*/0% { opacity:0; left:43.5%;}70% { opacity:0; left:43.5%;}100% { opacity:1; left:20%;}}@keyframes btn2 {0% { opacity:0; left:43.5%;}70% { opacity:0; left:43.5%;}100% { opacity:1; left:68%;}}@-webkit-keyframes btn2 {0% { opacity:0; left:43.5%;}70% { opacity:0; left:43.5%;}100% { opacity:1; left:68%;}}.lk1,.lk2 {text-decoration:none;font-family: Microsoft YaHei;color:#fff;transition:all 0.5s;}.link1,.link2 {width:170px;height:60px;border:2px solid #fff;-webkit-border:1px solid #fff;border-radius:30px;font-size: 23px;text-align:center;background: #ee9ca7;transition:all 0.8s;}.link2 {cursor:not-allowed;}.bt1,.bt2 {position:relative;top:22%;vertical-align:middle;} a.lk1:hover { /*这里使用CSS选择器，定义鼠标滑过效果*/color:#ee9ca7;transition:all 0.5s;}.link1:hover {background-color:#fff;background-color:rgba(255,255,255,0,2);border:2px solid #BBB;transition:all 0.8s;}a.lk2:hover {color:#ee9ca7;transition:all 0.5s;}.link2:hover {background-color:#fff;background-color:rgba(255,255,255,0,2);border:2px solid #BBB;transition:all 0.8s;}XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
.ly-box01 { width:50px; height:50px; background-color:#FFF; border-radius: 25px; position: absolute; left: 48%; bottom: 50%; margin-bottom:50%; overflow: hidden; transform-origin:center bottom; animation:box_to_point 18.5s 0s,bounce 2.5s 18.5s;} @keyframes box_to_point{ 0% { margin-bottom:50%; width:50px; height:50px; border-radius: 25px; position: absolute; left: 48%; bottom: 50%; } 10% { margin-bottom:0; width:50px; height:50px; border-radius: 25px; background-color:rgba(255,255,255,1); position: absolute; left: 48%; bottom: 50%; } 14% { margin-bottom:0; width: 80%; height: 550px; border-radius: 6px; background-color:rgba(255,255,255,0.5); position: absolute; left: 10%; bottom: 12%; } 96% { margin-bottom:0; width: 80%; height: 550px; border-radius: 6px; background-color:rgba(255,255,255,0.6); position: absolute; left: 10%; bottom: 12%; } 100% { margin-bottom:0; width:50px; height:50px; border-radius: 25px; background-color:rgba(255,255,255,1); position: absolute; left: 48%; bottom: 50%; }}@-webkit-keyframes box_to_point{ 0% { margin-bottom:50%; width:50px; height:50px; border-radius: 25px; position: absolute; left: 48%; bottom: 50%; } 10% { margin-bottom:0; width:50px; height:50px; border-radius: 25px; background-color:rgba(255,255,255,1); position: absolute; left: 48%; bottom: 50%; } 14% { margin-bottom:0; width: 80%; height: 550px; border-radius: 6px; background-color:rgba(255,255,255,0.5); position: absolute; left: 10%; bottom: 12%; } 96% { margin-bottom:0; width: 80%; height: 550px; border-radius: 6px; background-color:rgba(255,255,255,0.6); position: absolute; left: 10%; bottom: 12%; } 100% { margin-bottom:0; width:50px; height:50px; border-radius: 25px; background-color:rgba(255,255,255,1); position: absolute; left: 48%; bottom: 50%; }}@keyframes bounce{ 0% { margin-bottom:0; width: 50px; height: 50px; border-radius: 25px; bottom:50%; left: 48%; } 50% { margin-bottom:0; left: 48%; width: 50px; height: 50px; border-radius: 25px; bottom:0; left: 48%; } 100% { margin-bottom:0; width: 20px; height: 20px; border-radius: 10px; left: 48%; bottom: 0; left: 20%; }}@-webkit-keyframes bounce{ 0% { margin-bottom:0; width: 50px; height: 50px; border-radius: 25px; bottom:50%; left: 48%; } 50% { margin-bottom:0; left: 48%; width: 50px; height: 50px; border-radius: 25px; bottom:0; left: 48%; } 100% { margin-bottom:0; width: 20px; height: 20px; border-radius: 10px; left: 48%; bottom: 0; left: 20%; }}/*文本*/.ly-txt01 { position:absolute; width: 40%; left:10%; top:10%;}.ly-txt02 { position:absolute; width: 40%; left:60%; top:10%;}.ly-stxt01 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; left: 5%; top: 5%; opacity: 0; animation:ly-stxt01_move 15s; animation-delay:3s; -webkit-animation:ly-stxt01_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt01_move{ 0% {opacity:0;} 8% {opacity:1;} 90% {opacity:1;} 98% {opacity:0;} 100% {opacity:0;}}@-webkit-keyframes ly-stxt01_move{ 0% {opacity:0;} 8% {opacity:0;} 90% {opacity:1;} 98% {opacity:0;} 100% {opacity:0;}} .ly-stxt02 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; left: 5%; top: 5%; margin-top:-71px; opacity: 0; animation:ly-stxt02_move 15s; animation-delay:3s; -webkit-animation:ly-stxt02_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt02_move{ 0% {opacity:0;margin-top:-71px;} 8% {opacity:0;margin-top:-71px;} 16% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt02_move{ 0% {opacity:0;margin-top:-71px;} 8% {opacity:0;margin-top:-71px;} 16% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt03 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; left: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt03_move 15s; animation-delay:3s; -webkit-animation:ly-stxt03_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt03_move{ 0% {opacity:0;margin-top:-71px;} 16% {opacity:0;margin-top:-71px;} 24% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt03_move{ 0% {opacity:0;margin-top:-71px;} 16% {opacity:0;margin-top:-71px;} 24% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt04 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; left: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt04_move 15s; animation-delay:3s; -webkit-animation:ly-stxt04_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt04_move{ 0% {opacity:0;margin-top:-71px;} 24% {opacity:0;margin-top:-71px;} 32% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt04_move{ 0% {opacity:0;margin-top:-71px;} 24% {opacity:0;margin-top:-71px;} 32% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt05 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; left: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt05_move 15s; animation-delay:3s; -webkit-animation:ly-stxt05_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt05_move{ 0% {opacity:0;margin-top:-71px;} 32% {opacity:0;margin-top:-71px;} 40% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt05_move{ 0% {opacity:0;margin-top:-71px;} 32% {opacity:0;margin-top:-71px;} 40% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt06 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; right: 5%; top: 5%; opacity: 0; animation:ly-stxt06_move 15s; animation-delay:3s; -webkit-animation:ly-stxt06_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt06_move{ 0% {opacity:0;} 40% {opacity:0;} 48% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;}}@-webkit-keyframes ly-stxt06_move{ 0% {opacity:0;} 40% {opacity:0;} 48% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;}} .ly-stxt07 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; right: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt07_move 15s; animation-delay:3s; -webkit-animation:ly-stxt07_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt07_move{ 0% {opacity:0;margin-top:-71px;} 48% {opacity:0;margin-top:-71px;} 56% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt07_move{ 0% {opacity:0;margin-top:-71px;} 48% {opacity:0;margin-top:-71px;} 56% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt08 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; right: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt08_move 15s; animation-delay:3s; -webkit-animation:ly-stxt08_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt08_move{ 0% {opacity:0;margin-top:-71px;} 56% {opacity:0;margin-top:-71px;} 64% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt08_move{ 0% {opacity:0;margin-top:-71px;} 56% {opacity:0;margin-top:-71px;} 64% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt09 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; right: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt09_move 15s; animation-delay:3s; -webkit-animation:ly-stxt09_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt09_move{ 0% {opacity:0;margin-top:-71px;} 64% {opacity:0;margin-top:-71px;} 72% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt09_move{ 0% {opacity:0;margin-top:-71px;} 64% {opacity:0;margin-top:-71px;} 72% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}} .ly-stxt10 { font-family: Microsoft YaHei; font-size: 30px; font-color: #000; position: relative; right: 5%; top: 5%; opacity: 0; margin-top:-71px; animation:ly-stxt10_move 15s; animation-delay:3s; -webkit-animation:ly-stxt10_move 15s; -webkit-animation-delay:3s;}@keyframes ly-stxt10_move{ 0% {opacity:0;margin-top:-71px;} 72% {opacity:0;margin-top:-71px;} 80% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}@-webkit-keyframes ly-stxt10_move{ 0% {opacity:0;margin-top:-71px;} 72% {opacity:0;margin-top:-71px;} 80% {opacity:1;margin-top:0;} 90% {opacity:1;margin-top:0;} 100% {opacity:0;margin-top:0;}}"怎么用js代码实现生日快乐特效"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
代码
动画
快乐
生日
特效
内容
引擎
更多
浏览器
知识
浏览
不同
实用
学有所成
接下来
关键
名称
困境
实际
属性
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
公司办公网络安全
阿里云服务器eth绑定公网ip
wmp 服务器运行失败
临海市随意网络技术有限公司
技能大赛计算机网络技术
张召忠回应网络安全
计算机网络安全的形式
思科网络安全协议
公路数据库系统
内网服务器ip
wpf的api数据库
跨平台软件开发 c
网络技术和机电技术哪个好
腾讯服务器迷你世界
人社部附属网站人才数据库查询
四川java软件开发
阿里云服务器在哪里下载
数据库表插入数据无权限
软件开发中文档问题
专科计算机网络技术专业工资
软件开发学历好找工作吗
郑州专业软件开发价格表
吴中区智能服务器厂家直销价格
数据库安全性实施
5g网络安全面试
网络安全进校园小学方案
阿里巴巴网络安全合作商
网络安全技术知识培训内容
网络安全法确定了什么主体责任
中牟网络安全系统
