Jarvan大熊
Jarvan大熊

HTML5实现动画三种方式

编者注：作者以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有CSS3和javascript.通过合理的选择，来实现最优的实现。

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1)   canvas元素结合JS

(2)   纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）

(3)   CSS3结合jQuery实现

知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

1.canvas

html代码：

[html]  view plain  copy
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.          <title>Animation in HTML5 using the canvas elementtitle>  
  5.     head>  
  6.    <body onload="init();">  
  7.       <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas>code>-element.Please think about updating your brower!canvas>  
  8.       <div id="controls">  
  9.          <button type="button" onclick="speed(-0.1);">Slowerbutton>  
  10.          <button type="button" onclick="play(this);">Playbutton>  
  11.      <button type="button" onclick="speed(+0.1)">Fasterbutton>  
  12.       div>  
  13.    body>  
  14. html>  

js代码：

定义一些变量：

[javascript]  view plain  copy
  1. //code from http://caibaojian.com/3-html5-animations.html  
  2. var dx=5,           //当前速率  
  3.             rate=1,         //当前播放速度  
  4.             ani,            //当前动画循环  
  5.             c,              //画图(Canvas Context)  
  6.             w,              //汽车[隐藏的](Canvas Context)  
  7.             grassHeight=130,        //背景高度  
  8.             carAlpha=0,         //轮胎的旋转角度  
  9.             carX=-400,          //x轴方向上汽车的位置(将被改变)  
  10.             carY=300,           //y轴方向上汽车的位置(将保持为常量)  
  11.             carWidth=400,       //汽车的宽度  
  12.             carHeight=130,      //汽车的高度  
  13.             tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离  
  14.             axisDelta=20,       //汽车底部底盘的轴与轮胎的距离  
  15.             radius=60;          //轮胎的半径  

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

[javascript]  view plain  copy
  1. (function(){  
  2.            var car=document.createElement('canvas');    //创建元素  
  3.            car.height=carHeight+axisDelta+radius;   //设置高度  
  4.            car.width=carWidth;              //设置宽度  
  5.            w=car.getContext('2d');  
  6.         })();  

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

[javascript]  view plain  copy
  1. function play(s){               //参数s是一个button  
  2.            if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画  
  3.               clearInterval(ani);           //所以我们需要清除它(停止动画)  
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重命名该按钮为“播放”  
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一  
  8.               s.innerHTML='Pause';          //重命名该按钮为“暂停”  
  9.            }  
  10.         }  

加速，减速，通过以下方法，改变移动距离的大小来实现：

[javascript]  view plain  copy
  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  

页面加载的初始化方法：

[javascript]  view plain  copy
  1. //init  
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  

主调方法：

[javascript]  view plain  copy
  1. function drawCanvas(){  
  2.            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误  
  3.            c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作  
  4.   
  5.            drawGrass();                     //画背景  
  6.            c.translate(carX,0);                 //移动起点坐标  
  7.            drawCar();                       //画汽车(隐藏的canvas)  
  8.            c.drawImage(w.canvas,0,carY);            //画最终显示的汽车  
  9.            c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作  
  10.            carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走  
  11.            carAlpha+=dx/radius;                 //按比例增加轮胎角度  
  12.   
  13.            if(carX>c.canvas.width){              //设置某些定期的边界条件  
  14.               carX=-carWidth-10;                //也可以将速度反向为dx*=-1;  
  15.            }  
  16.         }  

画背景：

[javascript]  view plain  copy
  1. function drawGrass(){  
  2.            //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标  
  3.            var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
  4.            //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色  
  5.            grad.addColorStop(0,'#33CC00');  
  6.            grad.addColorStop(1,'#66FF22');  
  7.            c.fillStyle=grad;  
  8.            c.lineWidth=0;  
  9.            c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);  
  10.              
  11.         }  

画车身：

[javascript]  view plain  copy
  1. function drawCar(){  
  2.            w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板  
  3.            w.strokeStyle='#FF6600';                 //设置边框色  
  4.            w.lineWidth=2;                       //设置边框的宽度，单位为像素  
  5.            w.fillStyle='#FF9900';                   //设置填充色  
  6.            w.beginPath();                       //开始绘制新路径  
  7.            w.rect(0,0,carWidth,carHeight);              //绘制一个矩形  
  8.            w.stroke();                          //画边框  
  9.            w.fill();                            //填充背景  
  10.            w.closePath();                       //关闭绘制的新路径  
  11.            drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子  
  12.            drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个  
  13.              
  14.         }  

画轮胎：

[javascript]  view plain  copy
  1. function drawTire(x,y){  
  2.            w.save();  
  3.            w.translate(x,y);  
  4.            w.rotate(carAlpha);  
  5.            w.strokeStyle='#3300FF';  
  6.            w.lineWidth=1;  
  7.            w.fillStyle='#0099FF';  
  8.            w.beginPath();  
  9.            w.arc(0,0,radius,0,2*Math.PI,false);  
  10.            w.fill();  
  11.            w.closePath();  
  12.            w.beginPath();  
  13.            w.moveTo(radius,0);  
  14.            w.lineTo(-radius,0);  
  15.            w.stroke();  
  16.            w.closePath();  
  17.            w.beginPath();  
  18.            w.moveTo(0,radius);  
  19.            w.lineTo(0,-radius);  
  20.            w.stroke();  
  21.            w.closePath();  
  22.            w.restore();  
  23.   
  24.         }  

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

2.CSS3

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：

HTML代码：

[html]  view plain  copy
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animationstitle>  
  5.        head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis">div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr">div>  
  12.          <div class="vr">div>  
  13.          div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr">div>  
  16.          <div class="vr">div>  
  17.          div>     
  18.       div>  
  19.       <div id="grass">div>  
  20.       div>  
  21.       <footer>footer>  
  22.    body>  
  23. html>  

CSS代码：

[css]  view plain  copy
  1. body  
  2.  {  
  3.     padding:0;  
  4.     margin:0;  
  5.  }  

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

[css]  view plain  copy
  1. /*定义动画：从-400px的位置移动到1600px的位置 */  
  2.  @keyframes carAnimation  
  3.  {  
  4.     0% { left:-400px; }     /* 指定初始位置，0%等同于from*/  
  5.     100% { left:1600px; }   /* 指定最终位置,100%等同于to*/  
  6.  }  
  7.   
  8.  /* Safari and Chrome */  
  9.  @-webkit-keyframes carAnimation  
  10.  {  
  11.     0% {left:-400px; }  
  12.     100% {left:1600px; }  
  13.  }  
  14.   
  15.  /* Firefox */  
  16.  @-moz-keyframes carAnimation  
  17.  {  
  18.     0% {left:-400; }  
  19.     100% {left:1600px; }   
  20.  }  
  21.   
  22.  /*IE暂不支持,此处定义是为了向后兼容IE10*/  
  23.  @-ms-keyframes carAnimation  
  24.  {  
  25.     0% {left:-400px; }  
  26.     100%{left:1600px; }  
  27.  }  
[css]  view plain  copy
  1. @keyframes tyreAnimation  
  2.  {  
  3.     0% {transform: rotate(0); }  
  4.     100% {transform: rotate(1800deg); }  
  5.  }  
  6.   
  7.  @-webkit-keyframes tyreAnimation  
  8.  {  
  9.     0% { -webkit-transform: rotate(0); }  
  10.     100% { -webkit-transform: rotate(1800deg); }  
  11.  }  
  12.   
  13.  @-moz-keyframes tyreAnimation  
  14.  {  
  15.     0% { -moz-transform: rotate(0); }  
  16.     100% { -moz-transform: rotate(1800deg); }  
  17.  }  
  18.   
  19.  @-ms-keyframes tyreAnimation  
  20.  {  
  21.     0% { -ms-transform: rotate(0); }  
  22.     100% { -ms-transform: rotate(1800deg); }  
  23.  }  
[css]  view plain  copy
  1. #container  
  2.  {  
  3.     position:relative;  
  4.     width:100%;  
  5.     height:600px;  
  6.     overflow:hidden;        /*这个很重要*/  
  7.  }  
  8.   
  9.  #car  
  10.  {  
  11.     position:absolute;      /*汽车在容器中采用绝对定位*/  
  12.     width:400px;  
  13.     height:210px;       /*汽车的总高度，包括轮胎和底盘*/  
  14.     z-index:1;          /*让汽车在背景的上方*/  
  15.     top:300px;          /*距顶端的距离(y轴)*/  
  16.     left:50px;          /*距左侧的距离(x轴)*/  
  17.   
  18.     /*以下内容赋予该元素预先定义的动画及相关属性*/  
  19.     -webkit-animation-name:carAnimation;        /*名称*/  
  20.     -webkit-animation-duration:10s;         /*持续时间*/  
  21.     -webkit-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  22.     -webkit-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  23.   
  24.     -moz-animation-name:carAnimation;       /*名称*/  
  25.     -moz-animation-duration:10s;            /*持续时间*/  
  26.     -moz-animation-iteration-count:infinite;        /*迭代次数-无限次*/  
  27.     -moz-animation-timing-function:linear;      /*播放动画时从头到尾都以相同的速度*/  
  28.   
  29.     -ms-animation-name:carAnimation;        /*名称*/  
  30.     -ms-animation-duration:10s;         /*持续时间*/  
  31.     -ms-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  32.     -ms-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  33.   
  34.     animation-name:carAnimation;        /*名称*/  
  35.     animation-duration:10s;         /*持续时间*/  
  36.     animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  37.     animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  38.  }  
  39.   
  40.  /*车身*/  
  41.  #chassis  
  42.  {  
  43.     position:absolute;  
  44.     width:400px;  
  45.     height:130px;  
  46.     background:#FF9900;  
  47.     border: 2px solid #FF6600;  
  48.  }  
  49.   
  50.  /*轮胎*/  
  51.  .tire  
  52.  {  
  53.     z-index:1;          /*同上，轮胎也应置于背景的上方*/  
  54.     position:absolute;  
  55.     bottom:0;  
  56.     border-radius:60px;     /*圆半径*/  
  57.     height:120px;       /* 2*radius=height */  
  58.     width:120px;        /* 2*radius=width */  
  59.     background:#0099FF;     /*填充色*/  
  60.     border:1px solid #3300FF;  
  61.   
  62.     -webkit-animation-name:tyreAnimation;  
  63.     -webkit-animation-duration:10s;  
  64.     -webkit-animation-iteration-count:infinite;  
  65.     -webkit-animation-timing-function:linear;  
  66.   
  67.     -moz-animation-name:tyreAnimation;  
  68.     -moz-animation-duration:10s;  
  69.     -moz-animation-iteration-count:infinite;  
  70.     -moz-animation-timing-function:linear;  
  71.   
  72.     -ms-animation-name:tyreAnimation;  
  73.     -ms-animation-duration:10s;  
  74.     -ms-animation-iteration-count:infinite;  
  75.     -ms-animation-timing-function:linear;         
  76.   
  77.     animation-name:tyreAnimation;  
  78.     animation-duration:10s;  
  79.     animation-iteration-count:infinite;  
  80.     animation-timing-function:linear;  
  81.  }  
  82.   
  83.  #fronttire  
  84.  {  
  85.     right:20px;     /*设置右边的轮胎距离边缘的距离为20*/  
  86.  }  
  87.   
  88.  #backtire  
  89.  {  
  90.     left:20px;      /*设置左边的轮胎距离边缘的距离为20*/  
  91.  }  
  92.   
  93.  #grass  
  94.  {  
  95.     position:absolute;  /*背景绝对定位在容器中*/  
  96.     width:100%;  
  97.     height:130px;  
  98.     bottom:0;  
  99.     /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */  
  100.     background:linear-grdaient(bottom,#33CC00,#66FF22);  
  101.     background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
  102.     background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
  103.     background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
  104.  }  
  105.   
  106.  .hr,.vr  
  107.  {  
  108.     position:absolute;  
  109.     background:#3300FF;  
  110.  }  
  111.   
  112.  .hr  
  113.  {  
  114.     height:1px;  
  115.     width:100%;     /*轮胎的水平线*/  
  116.     left:0;  
  117.     top:60px;  
  118.  }  
  119.   
  120.  .vr  
  121.  {  
  122.     width:1px;  
  123.     height:100%;    /*轮胎的垂直线*/  
  124.     left:60px;  
  125.     top:0;  
  126.  }  

3.JQuery与CSS3

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：

[html]  view plain  copy
  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animationstitle>  
  5.        head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis">div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr">div>  
  12.          <div class="vr">div>  
  13.          div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr">div>  
  16.          <div class="vr">div>  
  17.          div>     
  18.       div>  
  19.       <div id="grass">div>  
  20.       div>  
  21.       <footer>footer>  
  22.    body>  
  23. html>  

CSS:

[css]  view plain  copy
  1.   

JS代码：

首先引入在线API：

[javascript]  view plain  copy
  1. "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  

实现动画代码（相当简洁）：

[javascript]  view plain  copy
  1.   

简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！


你可能感兴趣的:(css/css3,Canvas)

  • html,css,js的粒子效果 python算法(魔法师版) htmlcssjavascript
    这段代码实现了一个基于HTML5Canvas的高级粒子效果，用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析：HTML部分使用声明文档类型。标签内包含了整个网页的内容。部分定义了网页的标题（"高级粒子效果"）和一些基本样式，如设置页面无边距、隐藏滚动条以及黑色背景。包含一个元素用于绘图。CSS部分设置body的边距为0，并隐藏溢出内容，同时设置背景颜色为黑色。canvas块级显示，确保其占据
  • 前端新手教程：HTML、CSS 和 JavaScript 全面详解及实用案例 魏大帅。 htmlcssjavascript
    一、引言在当今数字化的时代，前端开发扮演着至关重要的角色，它决定了用户与网页和应用程序交互的体验。HTML、CSS和JavaScript作为前端开发的核心技术，分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍HTML、CSS和JavaScript的知识点，并通过实用案例帮助你快速上手。二、HTML基础（一）HTML概述HTML（HyperTextMarkupLanguage）即超文
  • XML 语法 凉风细细 xml
    XML的语法规则很简单，且很有逻辑。这些规则很容易学习，也很容易使用。XML声明XML声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：以上实例包含XML版本（version="1.0"），甚至包含字符编码（encoding="utf-8"）。UTF-8也是HTML5,CSS,JavaScript,PHP,和SQL的默认编码。XML文档必须有根元素XML必须包含根元素，它是所有其他元素的
  • HTML&CSS：雪花飘落邮票动画 前端Hardy CSShtmlcss前端
    这段代码创建了一个带有动画效果的邮票场景，通过CSS和JavaScript技术模拟了雪花的下落和邮票的装饰效果，为页面添加了节日气氛。演示效果HTML&CSS公众号关注：前端Hardy@importurl('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Inter:ital,opsz,wgh
  • 前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist 微臣愚钝 前端前端htmlcss
    前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表(To-DoList)-CSDN博客学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用jQuery来实现常见的动态交互功能。修改后的js代码关键点解析动态添加元素：通过append方法动态添加表格行，并为每一行生成唯一的index属性。事件委托：使用on方法将事
  • CSS Backgrounds(背景) froginwe11 开发语言
    CSSBackgrounds(背景)Introduction(介绍)CSSbackgroundsplayacrucialroleinwebdesign,allowingdeveloperstoapplycolors,images,andotherdecorativeelementstothebackgroundofHTMLelements.Thisenhancesthevisualappealof
  • vue前端下载某一区域为照片格式 答题卡上的情书 vue.js前端javascript
    1.需求背景项目中，需要对某一区域进行下载，要求已照片格式去下载（例如一个div盒子，里面有以上的字，以照片文件格式下载到本地）2.代码constdownloadView=ref();constimgName=ref('小程序码');importhtml2canvasfrom'html2canvas';import{saveAs}from'file-saver';constsubmitDownLo
  • 在 uni-app 中，可以通过几种不同的方式来动态地绑定 CSS 样式? 豆豆（前端开发+ui设计） uni-appcss前端
    在uni-app中，你可以通过几种不同的方式来动态地绑定CSS样式。这通常涉及到使用JavaScript来计算或改变样式，并将这些样式应用到组件上。以下是一些常见的方法：1.使用内联样式你可以直接在组件上使用:style绑定来动态地设置内联样式。这允许你使用JavaScript对象来定义样式。Hellouni-app!exportdefault{data(){return{dynamicStyle
  • vue快速集成word在线编辑 睡不着的可乐 vue.jsword前端
    word在线编辑查看一些文档金格插件WebOffice2015、chrome浏览器插件、only-office、UEditor、TinyMCE、CKEditor、wangeditor、canvas-editor最后选择了only-office和canvas-editoronly-office非常功能强大，word、ppt、excel都支持在线编辑预览，还支持协同，又有免费开源版。附上本地运行dem
  • 使用HTML5 Canvas 实现呼吸粒子球动画效果的原理 软件工程师文艺 前端html5前端htmljavascript
    在网页开发领域，动画效果能够极大地提升用户体验，让页面变得更加生动有趣。今天，我们深入剖析一个基于HTML5Canvas的3D粒子动画——呼吸粒子球。通过详细解读其代码实现，我们将全面了解如何运用HTML5的强大功能构建出如此迷人的视觉效果。效果展示：用HTML5Canvas和JavaScript实现粒子恒星脉动特效1，整体架构整个呼吸粒子球效果是HTML、CSS和JavaScript协同工作的成
  • CSS学习笔记10——元素的显示与隐藏&&布局技巧之margin，三角形 green_pine_ CSScss学习笔记前端html
    元素的显示与隐藏类似广告display显示隐藏visibility显示隐藏overflow溢出显示隐藏display属性display:none;隐藏对象display:block;除了转换为块级元素外，还有显示元素的意思display隐藏元素后，不再占有原来位置visibility可见性visibility:visible;元素可视visibility:hidden;元素隐藏visibility
  • vite webpack原理和区别 阿芯爱编程 js技巧面试webpack前端node.js
    Vite和Webpack的工作原理有显著的不同，以下是对它们各自原理的简要说明：Vite原理原生ES模块：Vite利用浏览器对原生ES模块（ESM）的支持，实现按需加载和编译。开发服务器启动时，Vite只需解析入口文件，并将导入的模块路径记录下来。按需编译：当浏览器请求某个模块时，Vite会实时编译该模块及其依赖。使用esbuild或Vite自带的编译器快速处理JavaScript和CSS。热模块
  • 分析 WebKit：跨平台的网页引擎及其挑战
    WebKit是一个开源的网页浏览引擎，广泛应用于许多现代浏览器中，尤其是苹果的Safari浏览器。它支持HTML、CSS、JavaScript等网页标准，并使浏览器能够将网页内容正确地渲染出来。然而，尽管WebKit在性能和兼容性方面有着显著的优势，但它仍面临着一些专业性的问题，特别是在渲染性能优化和跨平台兼容性方面。本文将深入探讨WebKit在这两个领域的挑战及其解决方案。1.渲染性能优化：We
  • CSS盒子 五月仲夏 css前端
    css三大特性css三大特性层叠性继承性优先级层叠性---主要解决样式冲突的问题---就近原则，样式不冲突，就不重叠继承性---子标签会继承父标签的一些样式,继承的样式（text-font-line-color这些元素开头的可以继承）高度，内外边距不可以继承css不可继承的属性边框属性（border）内边距属性（padding）外边距属性（margin）定位属性（position）大小属性（wid
  • web前端10--变化 Lorcian css前端学习笔记html5
    -transform`transform`：允许你通过改变元素的位置、旋转、缩放或倾斜来操作元素。1、rotate()`rotate()`函数旋转元素。语法：`rotate(angle)`，其中`angle`表示旋转的角度。```css.element{transform:rotate(45deg);}```2、scale()`scale()`函数缩放元素的大小。语法：`scale(x,y)`，其
  • 详细介绍：登录功能与form-serialize插件应用示例 还是鼠鼠 ajax前端javascriptbootstraphtml5vscodecss3
    目录项目背景与目的完整源码：(index.html)代码分析1.HTML部分(index.html)2.JavaScript部分(script标签中的代码)3.form-serialize插件（form-serialize.js）结论项目背景与目的本案例展示了如何通过HTML、CSS、JavaScript结合Bootstrap框架和axios库实现一个简单的登录功能。用户输入用户名和密码，点击登录
  • 跨站脚本攻击(XSS)进阶 wespten 全栈网络安全渗透测试代码审计网络安全工具开发xss前端
    1、XSS简介跨站脚本攻击（XSS）是客户端脚本安全中的头号大敌。OWASPTOP10威胁多次把XSS列在榜首。跨站脚本攻击，英文全称是CrossSiteScript，本来缩写是CSS，但是为了和层叠样式表（CascadingStyleSheet，CSS）有所区别，所以在安全领域叫做“XSS”。XSS攻击，通常指黑客通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，控制用户浏
  • three.js中文字符随机生成旋转动画 一粒马豆 javascriptthree.js中文字符动画
    Three.js随机中文字符生成旋转动画body{margin:0;}canvas{display:block;}{"imports":{"three":"https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/[email protected]
  • Element-ui el-tree 父节点不显示复选框 子节点显示复选框 鱼一直下m Js前端
    需求：父节点不显示复选框子节点显示复选框一.父节点不显示复选框子节点显示复选框(如图)二.改后效果(如图)三.上代码(如图)添加css样式.el-tree.el-tree-node.is-leaf+.el-checkbox.el-che
  • CSS快速入门 Annaday 前端css前端
    CSS引入方式CSS样式文件有两种引入方式，既可以写在HTML文件内，也可以作为独立的以.css结尾的文件存在方式一：使用独立的CSS文件引入当CSS样式作为单独的文件时，需要在HTML文件的标签中使用link标签来引入该CSS文件。例如，假设有一个名为styles.css的CSS文件，要将其引入到HTML文件中，需按以下方式在标签内添加link标签：在上述代码中：rel="stylesheet"
  • elementUI Table组件实现表头吸顶效果 热忱1128 elementuivue.js前端
    需求描述当table内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶开始编码环境：vue2.6+、elementUIstep1：给el-table__header-wrapper加上样式//style/sticky-table-header.scss.el-table[is-sticky]{overflow:initial;--sticky
  • 桌面应用程序开发：跨平台方案方案有什么？ 柚米汇 开发语言
    目前市面上最流行的桌面开发程序框架和工具包括以下几种：1.Electron简介：使用Web技术（HTML、CSS、JavaScript）开发跨平台桌面应用，结合Node.js和Chromium。优点：广泛使用的Web技术，开发门槛低。丰富的插件和生态系统支持。许多成功的应用案例（如VisualStudioCode、Slack、Discord）。工具：VisualStudioCode、Atom。2.
  • 微信小程序中实现背景图片完全覆盖显示，可以通过设置CSS样式来实现 徊忆羽菲 微信-小程序微信小程序css小程序
    wxml页面代码wxss样式代码/*pages/beiJing/beiJing.wxss*/.beijing{background-image:url("https://www.qipa250.com/qipa.jpg");/*定位：绝对定位*/position:absolute;/*上下左右都定位到0*/top:0;left:0;right:0;bottom:0;/*给它足够低的层次*/z-in
  • 前端构建工具 光影少年 前端软件构建
    前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速
  • CSS学习笔记9——定位position green_pine_ CSScss学习笔记前端html
    CSS定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式边偏移决定了该元素的最终位置定位模式通过position属性来设置值语义static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移属性：top、bottom、left、right属性示例描述toptop:
  • 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 网络安全web安全linux密码学CTFpythonddos
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放 warmbook 笔记vue.js前端html5
    原理本组件基于CSS的transform实现。移动端监听touch事件（单指移动，双指移动+缩放），PC端监听mouse事件（移动）和滚动事件wheel（缩放），更新transform的translateX/translateY/scale值，从而实现缩放、移动。由于transform不会产生重排，因此不节流也可以有很好的性能，用户体验就像德芙，纵享丝滑！鼠标事件比较好理解，记录鼠标按下时的坐标，
  • canvas开发动态足迹图 小蒋是个老程序员了 前端javascripthtml
    canvas平时用的不多，但是有些开发场景还真得用它才能实现需求，这不，前段时间有一个这样的足迹图的需求，以下是实现的代码：-->{{historyItem.chatTitle}}{{historyItem.time}}import{onBeforeMount,ref,watch}from'vue'importNavHeaderfrom'@/layouts/Header.vue';//import
  • 基于 Node.js 的天气查询系统实现(附源码） Kasper0121 node.js
    项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1
  • 关于CSS中毛玻璃和滤镜使用总结 计算机软件程序设计 知识科普css
    【1】毛玻璃毛玻璃效果（也称为磨砂玻璃效果）可以通过CSS的backdrop-filter属性来实现。这个属性允许你在背景上应用各种滤镜效果，从而创建出类似磨砂玻璃的效果。这种效果通常用于创建半透明背景下的模糊效果，使得背景图像或颜色变得柔和，同时保持前景内容的清晰可见。示例代码HTML结构CSS毛玻璃效果毛玻璃效果这是一个使用CSS创建的毛玻璃效果。CSS样式body,html{height:1
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他