过渡的一点小技巧持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情大家好,

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

大家好,我是大帅子,今天想给大家讲一下过渡的用法,顺便可以做一些好玩的东西,下面我们直接开始吧

首先我来帮大家回忆一下过渡是个啥,过渡其实就是一个css自己的一个动画效果,可以配合一下js写一点好玩的东西哈

1. 语法

我这里只说一下常用的 ,然后后面我们可以写延迟,速率一些,大家如果知道更多的话,我这边给大家放一个地址过渡语法,

transition:all 1s

2.使用方式

使用的方式也特别简单,这个我就是写了一个简单的位置,一摸就位移,我这边建议大家把属性写到动的元素上面,防止有颤抖

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all 1s;
    }

    .box:hover {
      transform: translate(0px, 40px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

当然我们肯定可以让这个盒子放大缩小,都是可以的transform: scale(倍数);

当然我们可以让输入框也有一个放大的效果,这里我没有写过渡,就给大家一个思路,供大家发挥

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   input {
   /* 取消输入框聚焦时候有框 */
      outline: none;
    }
    input:focus {
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <input type="text">
</body>

</html>

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅 还需努力!大家一起进步!!!