学习前端第十二天

最新推荐文章于 2023-09-20 08:54:34 发布

颜汐い

最新推荐文章于 2023-09-20 08:54:34 发布

阅读量77

点赞数 1

本文链接：https://blog.csdn.net/weixin_48680892/article/details/109749444

版权

css精灵图

也叫CSS雪碧图，是一种网页应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大的图片中去加载。
好处：可以减少图片的质量，网页图片加载速快。减少图片的请求的次数，加快网页的打开。

  .box{
      width: 40px;
      height: 40px;
      margin: 100px auto;
      border: 1px solid;
      /* background-color: red; */
      background-image: url("../img/wb.png");
      background-position: -392px -81px;
    }

过渡transition

功能：实现元素不同状态之间的平滑过渡。
之前：元素-- >hover状态直接切换，从开始到结束状态，瞬间完成，中间过程几乎看不到。
格式：
transition：过渡的属性完成的时间（S）运动曲线延迟时间
数值型的属性才可以设置过渡。
width height color font-size
transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all ，全部属性。
transition-duration完成时间：单位是s/ms。
transition-timing-function运动曲线：
linear匀速
ease减速
ease-in 加速
ease-in-out 县加速后减速
transition -delay 延迟时间：单位是s默认为0 过渡多久后生效。从结束状态返回到开始状态时，也会生效。

   <style>
    div{
      height: 49px;
      width: 49px;
    }
    .mi{
      margin: 100px auto;
      position: relative;
      overflow: hidden;
      background-color: #ff6700;
    }
    .mi-son{
      position: absolute;
      top: 0;
      transition: left 0.3s ease-in;
    }
    .logo{
      background-image: url("../img/mi-logo.png");
      left: 0px;
    }
    .home{
      left:49px;
      background-image: url("../img/mi-home.png");
    }
    .mi:hover .logo{
      left: -49px;
    }
    .mi:hover .home{
      left: 0px;
    }
    </style>

transform变形2D

1.缩放：
transition：scale（水平方向的缩放倍数，垂直方向的缩放倍数）
取值：大于1表示放大，小于1表示缩小。

  transform: scale(0.5);

2.位移：
transform:translate(水平偏移量，垂直偏移量）
参数：
正值：向右和向下负值：相反方向。
百分比：盒子本身的宽高*百分比。

 transform: translate(100%,100%);

3.倾斜：
transform：skew（水平倾斜角度，垂直倾斜角度）
单位：deg角度。
正值：顺时针，负值：逆时针。

 transform: skew(0,10deg);

4.旋转：
transform：rotate（角度）；
单位：deg正值为顺时针，负值为逆时针。

transform 可以书写多个2D转换，中间用空格隔开。
注：
当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。

设置旋转的中心点： transform-origin:
属性值：px 英文（left center right top bottom）百分比
百分比是按照自身宽高*百分比计算的。
只写一个值，第二值默认为center。

   transform-origin: 10%;

透视 perspective: 110px;
加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。

transform3D旋转

rotateX（）正值向上翻转
rotateY（）正值向右翻转
rotateZ（）正值向前，负值向后。
backface-visibility 背面隐藏
hidden visible（默认值）
应用：百度钱包

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-color: cornflowerblue;
    }
    .box{
      width: 300px;
      height: 300px;
      border: 1px solid;
      margin: 100px auto;
      position: relative;
    }
    .box>div{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      transition: all 2s;
      /* 当盒子旋转过背面时，隐藏 */
      backface-visibility: hidden;
    }
    .box1{
      background: url("../img/bdqb.png") left 0 no-repeat;
    }
    .box2{
      background: url("../img/bdqb.png") right 0 no-repeat;
      transform: rotateY(180deg);
    }
    .box:hover .box1{
      transform: rotateY(180deg);
    }
    .box:hover .box2{
      transform: rotateY(0);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

颜汐い

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习前端第十二天

css精灵图也叫CSS雪碧图，是一种网页应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大的图片中去加载。好处：可以减少图片的质量，网页图片加载速快。减少图片的请求的次数，加快网页的打开。 .box{ width: 40px; height: 40px; margin: 100px auto; border: 1px solid; /* background-color: red; */ background-i
复制链接

扫一扫