CSS3新特性之box-shadow+transform+transition

云卷云舒%

已于 2022-03-21 09:08:06 修改

阅读量1.8k

点赞数 2

分类专栏： CSS3 文章标签： css css3

于 2020-06-18 19:07:30 首次发布

本文链接：https://blog.csdn.net/qq_39290323/article/details/106840315

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、box-shadow:阴影

阴影的参数含义：

第几位参数	单位	含义	备注
1	length（px）	阴影水平偏移值	可以为负值
2	length（px）	阴影垂直偏移值	可以为负值
3	length（px）	阴影模糊值	不允许为负值
4	length（px）	阴影外延值	不允许为负值
5	color（rgba）	阴影的颜色

二、2D变换 transform

transform共有四个属性：translate、rotate、scale、skew

1.位移translate(<length>[,<length>])

指定对象的2Dtransition(2D平移)。第一个参数对应X轴，第二个参数对应Y轴。如果没有第二个参数，则为默认值0

属性	含义
translateX(<length>)	指定对象X轴（水平方向）的平移
translateY(<length>)	指定对象Y轴（垂直方向）的平移

2.旋转rotate(<angle>)

指定对象的2Drotation(2D旋转)，需先有transform-origin属性的定义。

  /* 旋转360° */
      transform: rotate(360deg);

3.缩放sacle(<number>[,<number>])

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。

属性	含义
scaleX(<number>)	指定对象X轴（水平方向）的缩放
scaleY(<number>)	指定对象Y轴（垂直方向）的缩放

4.倾斜skew(<angle>[,<angle>])

指定对象的skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

属性	含义
skewX(<angle>)	指定对象X轴（水平方向）的缩放
skewY(<angle>)	指定对象Y轴（垂直方向）的缩放

三、transition过渡

transition共有4个属性：transition-property、transition-duration、transition-timing-function、transition-delay

1.transition-property:参与过渡的属性

可以是某个具体属性，也可以改变所有可以过度的属性：all

2.transition-duration：过度的持续时间

单位是 s 秒，也可以是小数：0.3s

3.transition-timing-function：过渡的动画类型

类型	含义
linear	匀速
ease	平滑过渡（默认）
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	由慢到快再到慢

4.transition-delay：延迟过渡的时间

默认值为0 单位是s秒

特别注意：过渡一般都是结合hover使用，过度内容写在需要过度的元素里，不要写在hover里面。

小练习一

现有一个div，当鼠标放在div上面：div出现引用且上移一段距离（这些动画在2s内完成）

<body>
  <div></div>
</body>
 <style>
    div{
      width: 100px;
      height: 150px;
      border: 1px solid #ccc;
      margin: 100px auto;
      /* 过渡 */
      transition: all 1s;
    }
    /* 鼠标悬停效果 */
    div:hover{
      /* 阴影 */
      box-shadow: -10px 10px 10px 10px rgba(0, 0, 0, 0.6);
      /* 位移 Y轴 向上 */
      transform: translateY(-20px);
    }
  </style>

没有做动图，就这么看吧

小练习二

点击图片旋转360°（1s内完成）

  <div>
    <img src="http://img0.imgtn.bdimg.com/it/u=909846316,603824306&fm=11&gp=0.jpg" alt="">
    <img src="http://img4.imgtn.bdimg.com/it/u=1478500166,2908207380&fm=26&gp=0.jpg" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=1865879627,1394783586&fm=26&gp=0.jpg" alt="">
  </div>
   <style>
    img{
      width: 100px;
      height: 100px;
      border:1px dotted palevioletred;
      border-radius: 50%;
      /* 过渡 */
      transition: all 1s;
    }
    /* 鼠标悬停效果 */
    img:hover{
      /* 旋转360° */
      transform: rotate(360deg);
    }
  </style>