html--生日蜡烛

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量1k 收藏 24
点赞数 18
分类专栏： html 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139348533
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
  overflow: hidden;
  background: #fff;
}

.flame {
  cursor: pointer;
  outline: 0 solid transparent;
  text-transform: uppercase;
  width: 12vh;
  overflow: hidden;
}

.fire-text {
  color: #fff;
  height: auto;
  font-family: sans-serif;
  font-size: 12vh;
  padding-top: 4vh;
  text-align: center;
  transition: all 80ms linear;
  -webkit-transition: all 80ms linear;
  -moz-transition: all 80ms linear;
  -o-transition: all 80ms linear;
  -webkit-filter: blur(2px);
}

.fire-text div {
  display: inline-block;
}

.wick {
  width: 2px;
  height: 3vh;
  background: #444;
  left: 50%;
  margin-left: -0.3vh;
  margin-top: -3vh;
  position: relative;
  z-index: -1;
}

.candle-body {
  width: 4vh;
  height: 30vh;
  position: relative;
  left: 50%;
  margin-left: -2vh;
}

.c-r {
  background: #CE1836;
}

.c-o {
  background: #F85931;
}

.c-y {
  background: #EDB92E;
}

.c-g {
  background: #A3A948;
}

.c-b {
  background: #009989;
}

.c-p {
  background: #492D61;
}

.c-k {
  background: #EE9BA9;
}

.c-wrap {
  float: left;
  margin: 0 1vh;
}

.arrow_box {
  position: relative;
  background: #666666;
  border: 0.5vh solid #dadada;
  color: #dadada;
  padding: 2vh;
  font-family: sans-serif;
  font-size: 4vh;
  display: inline-block;
  opacity: 0.8;
}

.arrow_box:after, .arrow_box:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(102, 102, 102, 0);
  border-bottom-color: #666666;
  border-width: 3vh;
  margin-left: -3vh;
}

.arrow_box:before {
  border-color: rgba(218, 218, 218, 0);
  border-bottom-color: #dadada;
  border-width: 3vh;
  margin-left: -3vh;
}
  </style>
 </HEAD>

 <BODY>
  <div id="fire_msg" class="fire-text" contenteditable="true">HAPPY &nbsp; BIRTHDAY &nbsp; TIM</div>

<div id="instructions" style="display: table; margin: 0 auto;">
<div class="arrow_box">This fire text is editable</div>
</div>

<div id="cool" style="display: table; margin: 0 auto;">
<div class="arrow_box">Uwonga! &nbsp; That is pretty neat-o!<br/>Hope you have a wonderful day.</div>
</div>

<div style="display: table; margin: 0 auto;">
<div class="c-wrap"><div id="c0" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-r"></div></div>
<div class="c-wrap"><div id="c1" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-o"></div></div>
<div class="c-wrap"><div id="c2" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-y"></div></div>
<div class="c-wrap"><div id="c3" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-g"></div></div>
<div class="c-wrap"><div id="c4" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-b"></div></div>
<div class="c-wrap"><div id="c5" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-p"></div></div>
  <div class="c-wrap"><div id="c6" class="fire-text flame" contenteditable="true">&#9830;</div><div class="wick"></div><div class="candle-body c-k"></div></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var flameChar = '&#9830;';

var isInstructed = false;
var iTim = setTimeout(function(){$("#instructions").fadeIn(3000);},5000);

setTimeout(function () { 
  $('.flame').fadeTo(2000,0.1,function () {
    swapFlames(['H','E','R','B','E','R','T']);
    $('.flame').fadeTo(2000,0.9);
  });
}, 3000);

$(document).ready( function () {
  $("#instructions").hide();
  $("#cool").hide();

  wrapCharacters($('.fire-text'));

  setInterval(flicker, 80);

  $("#fire_msg").blur(function () {
    wrapCharacters($(this));
    if (!isInstructed) {
      clearTimeout(iTim);
      $("#instructions").hide();
      $("#cool").fadeIn(1200);
      setTimeout(function(){$("#cool").fadeOut(800);},3000);
      isInstructed = true;
    }
  });

  $('.flame').keyup(function(e){ check_charcount(e,$(this)); });
  $('.flame').keydown(function(e){ check_charcount(e,$(this)); });

  $('.flame').click(function () { document.execCommand('selectAll', false, null); });
});

function check_charcount(e, can)
{
  checkHex();

  if (!isInstructed) {
    clearTimeout(iTim);
    $("#instructions").fadeOut(1200);
    isInstructed = true;
  }

  if(e.which != 8 && can.text().length > 1)
  {
    can.text(can.text().substring(0, 1));
    wrapCharacters(can);
    e.preventDefault();
  }

  if (e.which == 8 || e.which == 46) {
    var allOut = true;
    $(".flame").each(function () {
      if ($(this).text() != "") {
        allOut = false;
      }
    });

    if (allOut) { swapFlames([flameChar,flameChar,flameChar,flameChar,flameChar,flameChar,flameChar]);
                }
  }
}


function checkHex() {
  if ($('#c0').text() == "#") {
    var cc = 
        $('#c0').text() +
        $('#c1').text() +
        $('#c2').text() +
        $('#c3').text() +
        $('#c4').text() +
        $('#c5').text() +
        $('#c6').text();
    $(".candle-body").css("background",cc);
  }
  else {
    var ca = ['#CE1836','#F85931','#EDB92E','#A3A948','#009989','#492D61','#EE9BA9'];
    $(".candle-body").each(function (i) {
      $(this).css("background",ca[i]);
    });
  }
}

function wrapCharacters(element) {
  $(element).contents().each(function() {
    if(this.nodeType === 1) {
      wrapCharacters(this);
    }
    else if(this.nodeType === 3) {
      $(this).replaceWith($.map(this.nodeValue.split(''), function(c) {
        return '<div>' + c + '</div>';
      }).join(''));
    }
    $('.fire-text div').each(function(){$(this).attr("y_pos","0");});
  });
}

function swapFlames(ln) {
  for(var i=0; i < ln.length; i++) {
    $('#c'+i).html(ln[i]);
  }
  wrapCharacters($('.flame'));
}

function flicker() {
  $('.fire-text div').each(function(){
    var x = parseFloat($(this).attr("x_pos"));
    var y = parseFloat($(this).attr("y_pos"));

    if ($(this).attr("data-up") == "1") {
      y += getVariance(1,2);
      if (y > 10) { $(this).attr("data-up", "0"); }
    }
    else {
      y -= getVariance(3,5);
      if (y < 2) { $(this).attr("data-up", "1"); }
    }

    $(this).attr("y_pos", y);

    var yO = 1/(10/(y+1));
    var yB = yO * (yO * getVariance(10,20));

    var ts = "0px 0px " + Math.floor(getVariance(30,50)) + "px #fff, " + 
        getShake() + "1px -" + (Math.floor(getVariance(1,y)) + 30) + "px " + getVariance(40,90) + "px rgba(200,200,200,"+yO+"), " + 
        getShake() + Math.floor(y/5) + "px -" + y + "px " + yB + "px rgba(255,200,60,"+yO+"), " + 
        getShake() + Math.floor(y/7) + "px -" + y + "px " + yB + "px rgba(210,180,20,"+yO+")";
    $(this).css("-webkit-text-shadow", ts);
    $(this).css("-moz-text-shadow", ts);
    $(this).css("-ms-text-shadow", ts);
    $(this).css("-text-shadow", ts);
    $(this).css("text-shadow", ts);

    var cl = 'rgba('+Math.floor(getVariance(240,250))+','+Math.floor(getVariance(160,180))+',0,'+getVariance(0.5,0.9)+')';
    $(this).css('color', cl);

    var mx = 'matrix(' + getVariance(0.98, 1.02) + 
        ', ' + getVariance(-0.02, 0.02) + 
        ', ' + getVariance(-0.02, 0.02) + 
        ', ' + getVariance(0.98, 1.02) + 
        ', ' + Math.floor(getVariance(-1, 1)) + 
        ', ' + Math.floor(getVariance(-1, 1)) + 
        ')';
    $(this).css('-webkit-transform', mx);
    $(this).css('-moz-transform', mx);
    $(this).css('-ms-transform', mx);
    $(this).css('-transform', mx);
    $(this).css('transform', mx);
  });
}

function getVariance(min,max) {
  return Math.random() * (max - min) + min;
}

function getShake() {
  return (Math.random() > 0.5) ? "-" : "";
}


</script>
 </BODY>
</HTML>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 18
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯 CSS 实现蜡烛融化（水滴）效果
下雨收衫的博客
04-02 1567
实现效果 实现思路 融化效果是利用 filfilter 的 contrast 和 blur 实现的。 在父元素中设置 contrast 并在子元素中设置 blur 即可实现两者相融的效果。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
html生日祝福特效代码
02-28
- `image`：这个文件夹很可能包含了所有用于装饰生日祝福页面的图像资源，如生日蜡烛、气球、礼物等。 创建一个支持手机和电脑查看的HTML生日祝福特效代码，需要考虑响应式设计，确保在不同设备和屏幕尺寸下都能...
html5-css3-生日蛋糕
07-22
html5-css3-new-cake 适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
蓝桥杯-生日蜡烛
weixin_30520015的博客
04-06 45
生日蜡烛 某君从某年开始每年都举办一次生日party，并且每次都要吹熄与年龄相同根数的蜡烛。 现在算起来，他一共吹熄了236根蜡烛。 请问，他从多少岁开始过生日party的？ 请填写他开始过生日party的年龄数。注意：你提交的应该是一个整数，不要填写任何多余的内容或说明性文字。26 #include <iostream>#include <cmath>usin...
CSS3+HTML蜡烛燃烧动画
ICode联盟
04-27 428
下载地址 CSS3+HTML蜡烛燃烧动画特效网页代码 dd:
css3 html5燃烧,css3逼真的蜡烛点燃动画特效
weixin_42237496的博客
06-18 464
使用方法：1、head引入css文件2、body引入HTML代码
【前端】HTML+CSS实现卡通蜡烛动漫效果【附源码】
m_aolifande的博客
06-06 2240
HTML+CSS实现卡通蜡烛动漫效果
html5 3D蜡烛烛光动画特效
06-11
html5基于three制作的黑夜中3D蜡烛烛光动画特效，支持鼠标拖动旋转视角查看特效。
枚举例题---生日蜡烛 2016蓝桥杯填空题
01-26 400
生日蜡烛 某君从某年开始每年都举办一次生日party，并且每次都要吹熄与年龄相同根数的蜡烛。 现在算起来，他一共吹熄了236根蜡烛。 请问，他从多少岁开始过生日party的？ 请填写他开始过生日party的年龄数。注意：你提交的应该是一个整数，不要填写任何多余的内容或说明性文字。 思路：如果要算他现在多少岁 则要假设从一个数开始算起来 如果得到一个恰好加到236的数，则假设成...
前端基础-html
m0_52118763的博客
03-04 1468
一html 1.p标签 GB2312 、BIG5 、GBK 和 UTF-8， 简体中文，繁体中文，简体和繁体，万国码 为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即<h1> - <h6> 。 <h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1> <h4>数据统计:水花兄弟合砍61分</h4> <p>库里22投11中，三分14投4
jQuery生日蛋糕蜡烛动画特效
07-24
《jQuery生日蛋糕蜡烛动画特效实现详解》 在IT领域，动态效果的运用极大地提升了用户体验，使得网页设计更具趣味性和互动性。今天我们要探讨的是一个使用jQuery和GSAP库实现的生日蛋糕蜡烛动画特效。这个特效以SVG...
生日蜡烛PowerPoint背景图片下载.rar
07-15
标题中的“生日蜡烛PowerPoint背景图片下载.rar”表明这是一个包含与生日主题相关的PowerPoint背景图像的压缩文件。用户可以下载这些图像来装饰他们的PPT演示文稿，特别是在制作生日庆祝或相关活动的幻灯片时。这个...
HTML送友人的生日蛋糕源码
03-12
在这个生日蛋糕页面中，JS可以用来实现用户与蛋糕的互动，例如点击“吹灭”按钮后，蜡烛的图片会消失，或者播放一段庆祝生日的音乐。此外，可能还会有计时器功能，让蛋糕上的数字蜡烛自动变化，模拟实际生日的逐年...
HTML5庆祝生日蛋糕烟花特效
DICA的SEOer专栏
03-21 3934
HTML5庆祝生日蛋糕烟花特效 以上代码使用HTML5的元素和JavaScript实现了一个简单的生日蛋糕烟花特效。在页面加载完成后，会自动启动动画，当鼠标点击页面时，会在鼠标位置发射一个烟花。
通过 tomcat 让手机访问到电脑写的 html 网页
m0_75138009的博客
07-10 688
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1673
title>充电效果
HTML(29)——立体呈现
m0_74386799的博客
07-09 591
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。
用html语言写一个生日蛋糕插上蜡烛
07-23
以下是使用 HTML 代码编写的生日蛋糕，并在上面插上蜡烛： ```html <!DOCTYPE html> <html> /* 蛋糕的样式 */ .cake { width: 200px; height: 150px; background-color: #fddbd0; border-radius: 50% 50% 0...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值