您现在的位置是:首页 > Javascript
当前栏目
生日快乐代码js特效
2023-03-15 23:16:53 时间
在学习了不少js知识点后,如果有身边人快过生日,可以通过js代码编写出生日快乐的特效送给他。既是给别人一个惊喜,也是自身js学习的一个检验。在开始js运行时,我们要先检验下代码运行的环境是否符合,然后就生日快乐的代码展开讲解。
1.js代码运行环境
浏览器(引擎)
node(基于v8渲染js)
webview(v8引擎)
2.js生日快乐代码
<div class="button-style1"> <a href="Memories.html" class="lk1"> <div class="link1"> <div class="bt1"> 我很喜欢 </div> </div> </a> </div> <div class="button-style2"> <a class="lk2"> <div class="link2"> <div class="bt1"> 我不喜欢 </div> </div> </a> </div>
.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; }
<div class="section"> <div class="ly-box01"> <div class="ly-txt01"> <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-txt02"> <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p> </div> </div> </div>
.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代码做的生日快乐特效,其中还包括了HTML5和CSS3的知识点,在进行代码编写时要灵活运用其他的知识模块。
相关文章
- Linkerd 2.10(Step by Step)之使用 Linkerd 进行分布式跟踪
- 【前端】你好,我叫TypeScript (五)装饰器
- React 性能优化 :包括原理、技巧、Demo、工具使用
- 20个 Javascript 技巧,提高我们的摸鱼时间!
- 函数指针定义的一个错误
- 原以为哈夫曼树、哈夫曼编码很难,结果……
- 五个常见的JavaScript内存错误
- 分布式事务 — 可靠消息最终一致性方案
- 前端百题斩——从验证点到手撕New操作符
- nodejs和php实现图片访问实时处理
- 大佬,怎么办?升级React17,Toast组件不能用了
- 解读官方博客:React18真的来了
- 7.1 万 Star!超实用,60 多种动画效果的 CSS 库
- 拯救大龄码农:35-40 岁之后,软件开发工程师走进死胡同了?
- 2021年优秀JavaScript框架
- 盘点JavaScript中数组遍历的全部方式(上篇)
- HarmonyOS实战 | 贪吃蛇游戏 | JS全注释
- 使用更具可读性的方式来设置 TypeScript 类型
- 详细比较Web开发技术AngularJS、ReactJS与VueJS
- JavaScript 异步编程指南 — 关于协程的一些思考