【CSS】CSS之&旋转&动画

A Lucky Boy

已于 2022-05-23 22:36:22 修改

阅读量2.7k

点赞数 2

分类专栏： CSS 文章标签： css 动画 css3

于 2022-05-23 19:13:42 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/124933011

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

iconfont图标的使用

进入https://www.iconfont.cn

添加完成icon font图标之后点击添加至项目，在项目中就可以看到添加的图标

常用的有三种方法，第一种下载至本地第二种生成在线代码复制到相应的文件内第三种使用为元素添加

使用时要用标签包裹，且有两个类名第一个为iconfont 第二个为需要引用的字体图标

下载至本地需要引入两个字体图标到根目录的fonts文件夹内分别为下图四个文件且引入iconfont的css文件

本地下载如果需要添加新的图标，则需要重新替换iconfont.css文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ljaz33uq-1653304327257)(C:\Users\Admin\AppData\Local\Temp\1653004980696.png)]

<link rel="stylesheet" href="../fonts/iconfont.css">
<style>
    .icon-location {
      font-size: 20px;
      color: pink;
    }
  </style>
</head>

<body>
  <span class="iconfont icon-location"></span>
</body>
生成在线代码直接复制到代码中，引入css路径填写复制的路径并在前缀添加https: 或者http:

 <link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_m3gtoblu85.css">
 <style>
   .icon-location {
     font-size: 20px;
     color: pink;
   }
 </style>
</head>

<body>
 <span class="iconfont icon-location"></span>
</body>
使用伪元素添加同样引用在线代码引入步骤同上一步一样在iconfont网站点击一下在现代码即可进入css源码文件并找到相关类名中的代码写到content中
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_8cdevwobz7.css">
 <style>
   .box {
     width: 100px;
     height: 40px;
     border: 1px solid pink;
   }

   .box::after {
     content: '\e6b7';
     line-height: 40px;
     float: right;
   }
 </style>
</head>

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

位移

  <style>
    .box {
      height: 100px;
      width: 100px;
      background-color: pink;
      transition: .5s;

    }

    .box:hover {
      transform: translateY(-10px);
    }
  </style>
</head>

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

水平方向为 transform: translateX(需要位移的距离);
垂直方向为 transform: translateY(需要位移的距离);
向前或向后移动为 transform: translateZ(需要位移的距离);
连写时为 transform: translate(水平方向位移的距离（X轴）,垂直方向位移的距离（Y轴）前后方向位移的距离（Z轴）);
透视： perspective: 200px;由远到近的效果，该属性应给父元素设置(应注意如果配合3D旋转使用时子盒子要和父盒子一样大或者在父盒子中间，否则会出现偏移)

旋转

<style>
    .box {
      width: 600px;
      height: 500px;
      background-color: pink;
      margin: 100px auto;
      border-radius: 150px 150px 0px 0px;
      transition: all .3s;

    }

    .box:hover {
      transform: rotate(180deg);
    }
  </style>
</head>

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

顺时针(正值)/逆时针旋转(负值)transform: rotate(需要旋转的度数单位为deg);
沿着X轴旋转(类似于围绕单杠旋转往下为负值，往上为正值)transform: rotateX(需要旋转的度数单位为deg);
沿着Y轴旋转（类似于围绕钢管旋转往右为正值，往左为负值）transform: rotateY(需要旋转的度数单位为deg);
沿着Z轴旋转（类似于一个平躺的圆柱体将它扶起来，从左往右为正值(90度时立起来时左边在上)，从右往左为负值(90度时立起来时右边在上)）transform: rotateZ(需要旋转的度数单位为deg);
3D立体显示 transform-style: preserve-3d;需要立体显示或者围绕着XYZ轴旋转时需要给父元素设置该属性，否者它们将在同一平面
如果旋转需要和平移一同实现时应将平移写到旋转前边
旋转单位也可以为turn 1turn为一圈

转换原点

语法：transform-origin: 原点水平位置原点垂直位置

取值

方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

缩放

  <style>
    * {
      margin: 0;
      padding: 0;
    }



    .box {
      margin: 0 auto;
      width: 200px;
      height: 200px;
      position: relative;
    }

    .box img:first-child {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(5);
      opacity: 0;
      transition: .5s;
    }

    .box:hover img:first-child {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;

    }

    .box img:nth-child(2) {
      width: 100%;
      height: 100%;
    }
  </style>
<body>
 <div class="box">
    <img src="../images/play.png" alt="">
    <img src="../images/11.jpg" alt="">
  </div>
</body>

缩放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>
    span {
      /* 平面转换属性 设置给行内元素没有效果 必须转换为行内块或块元素 */
      display: inline-block;
      height: 200px;
      width: 200px;
      background-color: pink;
      transition: all 1s;
    }

    span:hover {
      transform: translate(100px);
    }
  </style>
</head>

<body>
  <span>我是行内标签</span>
</body>

</html>

**平面转换属性设置给行内元素没有效果必须转换为行内块或块元素 **

渐变色

 .three {
      height: 200px;
      width: 200px;
      background-image: linear-gradient(pink, hotpink);
    }

渐变色为 background-image: linear-gradient(第一种颜色, 第二种颜色);
如果在颜色前加上to方位（例如：to top）就是从下到上来渐变（方位为top、bottom、left、right）

动画

关键帧

 <style>
    .box {
      height: 200px;
      width: 200px;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
      background-color: pink;
      /* animation: active 1s linear forwards alternate; */
      animation: active 1s;
    }
	/*单帧动画*/
    @keyframes active {
      from {
        transform: translateX(0) rotate(0deg);
      }

      to {
        transform: translateX(1000px) rotate(360deg);
      }
    }
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
      /* 
      linear 匀速行驶
      infinite 无限循环
      alternate 左右来回执行动画
      forwords 动画结束 停留在最后一帧状态 需要在不循环状态使用
       */
      animation: active 4s linear forwards alternate;
    }
    /* 多帧动画 */
    @keyframes active {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }

      25% {
        transform: translate(500px, 0) rotate(90deg);

      }

      50% {
        transform: translate(500px, 300px) rotate(180deg);

      }

      75% {
        transform: translate(0, 300px) rotate(270deg);

      }

      100% {
        transform: translate(0, 0) rotate(360deg);
      }
    }
  </style>

调用动画属性 animation: active 4s linear forwards alternate;

linear 匀速行驶
infinite 无限循环
alternate 左右来回执行动画
forwords 动画结束停留在最后一帧状态需要在不循环状态使用

鼠标经过暂停

 .box:hover {
      animation-play-state: paused;
    }

逐帧动画

steps(数字)

 <style>
    .box {
      width: 140px;
      height: 140px;
      background: url(../images/bg.png) no-repeat;
      animation: move 3s steps(12) infinite;
    }

    @keyframes move {
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>

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

作用：使某些动画变得清晰可见的动画(例如一个小人奔跑)

多组动画

  /* 多组动画 中间应用,逗号隔开 */
      animation: move 3s steps(12) infinite, run 5s forwards linear;

ion: move 3s steps(12) infinite;
}

@keyframes move {
  to {
    background-position: -1680px 0;
  }
}

~~~

作用：使某些动画变得清晰可见的动画(例如一个小人奔跑)

多组动画

  /* 多组动画 中间应用,逗号隔开 */
      animation: move 3s steps(12) infinite, run 5s forwards linear;

A Lucky Boy

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】CSS之&旋转&动画

#CSS位移&旋转&缩放&动画iconfont图标的使用进入https://www.iconfont.cn添加完成icon font图标之后点击添加至项目，在项目中就可以看到添加的图标常用的有三种方法，第一种下载至本地第二种生成在线代码复制到相应的文件内第三种使用为元素添加使用时要用标签包裹，且有两个类名第一个为iconfont 第二个为需要引用的字体图标下载至本地需要引入两个字体图标到根目录的fonts文件夹内分别为下图四个文件且引入icon
复制链接

扫一扫