1. 首页
  2. SEO优化教程
  3. SEO优化理论
  4. 小红书排名怎么刷:以下HTML5页面大纲开始!

小红书排名怎么刷:以下HTML5页面大纲开始!

SVG(可缩放矢量图形)允许您在网页中创建完全按比例放大和缩小的图像,无论用户设备屏幕的大小如何。此外,您可以在SVG中实现交互式和动画功能。您可以使用CSS和JavaScript以及许多SVG元素在Web页面代码中创建动态SVG。

  SVG(可缩放矢量图形)同意您在网页中建立完整按比例放大和减少的图象,无论用户设置装备摆设屏幕的巨细若何。另外,您能够在SVG中完成交互式和动画性能。您可以应用CSS和JavaScript以及许多SVG元素在Web页面代码中建立静态SVG。

  在本教程中,我将先容在HTML5页面中构建SVG所触及的基础进程。咱们将一起触摸交互和动画,并向您先容一些基础的外形和突变。终究效果将是一个简略的交互式秒表动画结果,带有启动和休止按钮,同意用户操纵腕表的扭转。效果应该在首要浏览器的新版本中起作用,但在较旧的浏览器中大概无奈造访。

  这是终究效果的模样:

  

  用户能够单击开端和休止按钮以检察手在表盘四周扭转。

  应用SVG元素

  从如下HTML5页面纲要开端:

  在body部分外,增添一个SVG元素,以下所示:

  ID不是必须的,但我将使用它来配置JavaScript函数的宽度和高度。您能够将宽度和高度配置为关上SVG标志的一部分,但在JavaScript中配置尺寸将同意咱们演示若何建立能够轻松扩大的图形元素。

  在款式部份中,为SVG元素增添边框,以便您能够在页面中清楚地看到其界限:

  svg {border:1px solid#999999;}

  界说

  SVG 的defs部份同意您界说可重用的元素,比方突变添补。在SVG元素中增添一个defs元素:

  让我们在defs部份增添一些突变:咱们需求一个用于后台,一个用于开端和休止按钮,一个用于拨号地区。从后台开端:

  这是线性突变。该ID将同意咱们在建立它时将其应用于后台外形。X1,X2,Y1和Y2的属性指导开端和完结坐标的梯度。在这类情况下,它将从左上角到右下角。突变有三个色彩休止,在开端,完结和半途。

  现在为表盘增添突变:

  此次梯度是径向的。仅有的区别是突变属性指导突变将延长的中央圆(fx和fy中心点)和外圆(cx和拥有r半径的cy中心点)。在这类情况下,突变将简略地从圆的中央延伸到其外边缘,第一个色彩休止沿着添补突变的任何外形半途开端。

  为开端和休止按钮增添此外两个突变:

  除了色彩以外,它们与表盘突变类似,但第一个色彩休止从30%开端,是以第一种颜色以固体方式暗示。

  建立外形

  在SVG中建立外形。

  后台

  应用矩形外形来暗示图形的后台。在SVG元素外部,在defs部份以后:

  矩形从SVG元素的左上角开端,并扩大其全部宽度和高度。经由过程应用相对于百分比值,咱们能够建立一个外形,无论咱们配置SVG的团体尺寸,都可以按比例放大和减少。咱们经由过程包括其ID属性来指定咱们在界说部份中列出的后台突变。

  秒表拨号

  在后台矩形以后增添秒表表盘,使表盘表现在它下面:

  此次外形是卵形,在这类情况下是圆形,由于rx和ry(X和Y半径属性)相称。在CX和CY的属性指导所述椭圆外形的中心点,在这类情况下,SVG的中央。咱们使用咱们建立的添补,此次也应用色彩和宽度指定笔画。

  秒表手

  应用矩形在表盘外形后增添秒表指针:

  矩形程度搁置在中心,在表盘的边界内,从中央垂直向上延伸到表盘边缘邻近。该RX和RY属性指定圆角。稍后咱们将在此矩形外形元素中增添代码以对其举行动画处置。

  启动和休止按钮

  增添开端和休止按钮:

  按钮配置为表现在表盘右边,接近顶部和底部。咱们对这些外形应用ID值,以便在用户点击它们时指导浏览器启动和休止动画时援用它们。

  动画

  为表盘配置动画,在咱们界说手形的矩形元素内:

  SVG供应了一系列动画选项 – 在这类情况下,咱们应用animateTransform,以便咱们能够扭转外形。咱们应用attributeName和type属性指定扭转变更。在开端和完结的属性应用咱们给的开端ID值和休止按钮的外形,以指定动画应当开端和点击这些外形完结。咱们指导继续时候,在动画休止时解冻动画并将其配置为有限重复。咱们能够抉择包括如下属性,指导动画的开端和休止地位,包孕度数,扭转中央X和Y点:

  from=“0 100 100“ to=“360 100 100“

  然则,因为咱们在代码的别的部份使用了相对于百分比值,因此在配置SVG维度时,咱们将在JavaScript中配置这些属性 – from和to属性不克不及占用百分比值。下面的固定值适用于SVG配置为200宽度和高度的处所,这是咱们要做的演示。

  经由过程JavaScript设想款式

  应用JavaScript来静态配置维度。在剧本部份,增添一个函数:

  function setDimensions(){

  }

  在函数外部指定宽度和高度:

  var width=200;

  var height=200;

  猎取SVG元素的援用并配置尺寸:

  var svgElem = document.getElementById(“stopWatchGraphic“);

  svgElem.style.width=width+“px“;

  svgElem.style.height=height+“px“;

  猎取动画元素的引用来配置扭转中心点:

  var stopWatch = document.getElementById(“rotateStopWatch“);

  应用宽度和高度计较中心点:

  var centerX = width/2;

  var centerY = height/2;

  预备from和to属性:

  var from = “0 “+centerX+“ “+centerY;

  var to = “360 “+centerX+“ “+centerY;

  配置animateTransform属性:

  stopWatch.setAttribute(“from“, from);

  stopWatch.setAttribute(“to“, to);

  最初,在函数以后但仍在剧本部份外部,在页面内容加载时挪用该函数:

  window.addEventListener(“DOMContentLoaded“, setDimensions, false);

  在浏览器中保管并关上,点击按钮开端和休止秒表指针扭转。

  经由过程测验考试SVG的分歧宽度和高度值举行试验。当初您曾经领有了一个性能失常的交互式动画SVG,能够应用外形,突变和动画来感触感染您能够做的工作。

转载请注明: 爱推站 » 小红书排名怎么刷:以下HTML5页面大纲开始!

相关文章

评论列表(0)

发表评论