3D登陆框实战汇总

3D登录框实战问题汇总

from

• action
  action属性规定了提交表单信息时，向何处发送表单数据，即是处理表单数据的目标地址。

为什么使用i标签作为字体图标

• 标签显示斜体文本效果。
• 用 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
• 比 短，但 gzip 后差异很小，不过打字可以少按三个键；
• 多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。

a链接

• a是行内元素

引入字体图标的时候

• 注意在url上添加https
• //的用法
  1、它会判断当前的页面协议是http 还是 https 来决定请求 url 的协议。
  2、用于处理 网站使用的协议和 网页中请求的外网资源不一致的问题。

transform: translate(-50%,-50%);的用法

• 简单来说，它可以归结为translateX(-50%) translateY(-50%)，这意味着：

  沿着x轴向左移动我宽度的50％，然后向左移动
  沿着y轴向上移动我高度的50％

border-shadow用法

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

transform: rotateY(0deg);

沿着y轴旋转0度

选择input 选择器的时候

• input[type=‘text’]
• input[name=’’]

backface-visibility

设置他的背面为是否可以看见

classList.contains

contain记得写成contains

在选择classList.contains(‘close’)

选择的元素最好不要是里面还有child的元素，如果他的孩子里面可能没有这个close的话，将会无法点击得到目标元素

function

function不要学成funciton

正则表达式的运用

$('').value !== $('').value

if（!/^\w{3,6}&]/.test($('').value)）{}

js动画的实现

• 如果能用css动画实现的话，尽量用css动画去实现

使用setTimeout来实现动画（不推荐）

<div id="ball"></div>
<script>
  var offsetX = 500  //要水平移动的距离
  var moveOffset = 0  //当前已经移动的距离
  var step = 5   //每次移动的距离

  function move(){
    if(moveOffset < offsetX){
      ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
      moveOffset += step
      setTimeout(move, 5)
    }
  }
  move()

</script>

setTimeout()

在5ms后执行这个函数

requestAnimationFrame

<div id="ball"></div>
  <script>
    var offsetX = 500  //要水平移动的距离
    var moveOffset = 0  //当前已经移动的距离
    var step = 5   //每次移动的距离

    function move(){
      if(moveOffset < offsetX){
        ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
        moveOffset += step
        requestAnimationFrame(move)
      }
    }
    move()

1s大概执行几十次，javascript自动达到他的最高性能

动画的其他概念
JavaScript动画详解