3月23日

　　今日知识点整理

复习内容

 * 1. 定位 
 *    1.为了实现页面中特殊的样式结构或是效果  比如轮播图中的左右按钮
 *    2.为了让元素在页面中灵活的进行移动
 * 
 * 2. 定位分四种
 *    static     任何元素都有静态定位
 *    relative
 *    absolute 
 *    fixed
 * 
 * 3. static的特点 
 *    1. 任何元素其实都有一个静态定位
 *    2. 不脱离标准流,占据原来标准流的位置
 *    3. 不能够通过边偏移进行位置的移动
 * 
 * 4. relative的特点 
 *    1. 不脱离标准流的控制,占据原来标准流的位置
 *    2. 可以通过边偏移来进行位置的移动
 *    3. 是相对于自身原来的位置进行的移动
 * 
 * 5. 绝对定位的特点 
 *    1. 脱离标准流的控制，不占据原来标准流的位置
 *    2. 可以通过边偏移进行位置的移动
 *    3. 如果只有一个元素，而且是绝对定位，是以页面为参考进行移动
 *    4. 如果元素有多层嵌套的话,如果子元素是绝对定位，则参考点是以离自身最近的具有非静态定位的父级元素
 *    5. 可以改变元素的显示方式(定位了的行内元素具有行内块的特性,可以设置宽高)
 * 
 * 6. 固定定位的特点 
 *    1. 脱离标准流的控制,不占据原来标准流的位置
 *    2. 可以通过边偏移进行位置的移动
 *    3. 参考浏览器可视区进行的边偏移移动
 *    4. 可以改变元素的显示方式(具有固定定位的行内元素，也会有行内块的特性，可以设置宽高)
 * 
 * 7. 层级z-index
 *    定位(非静态定位)了的元素都有一个层级的概念，默认的层级是0
 *    如果定位了的元素，在页面中的显示有重合的话，后面的元素会盖住前面的元素
 *    如果不想被别的后面的元素所盖住，需要设置z-index的值
 *    只有非静态定位的元素才会有层级的概念。

今日学习任务

/**

* 1. 主要是对之前知识点的一些补充或是扩展

* 2. 元素的显示或是隐藏

* 3. 溢出隐藏

* 4. 布局方式

* 通栏布局版心布局分栏布局

* 5. 图片的垂直显示方式

* 6. 背景平铺的使用

* background-repeat 平铺有时候，是有用的

* 7. 精灵图的使用

* 1. 为了减少服务器端的请求压力

* 2. 提高执行的效率

* 就是将多个小图片拼在一个大的图片上

* 8. 字体图标

* 9. css3中的一些特效

* 过渡

* 变换

* 旋转

* 倾斜




 *    能够说出display:none与 visibility:hidden隐藏元素的区别
 *    能够说出CSS精灵技术产生的目的(解决什么问题）  减少请求的次数，提高页面渲染的效率
 *    能够使用精灵图设置背景图片
 *    能够写出滑动门微信案例
 *    能够写出3中常见的鼠标样式（cursor）  pointer  move  text  help 
 *    能够写出溢出文字显示省略号的代码
 *    能够使用字体图标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>绝对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 300px;
      position: absolute;
      background-color: orange;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>绝对定位</title>
  <style>
    * {
      margin:0;
      padding: 0;
    }
    .demo {
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      margin: 200px 0 0 160px;
      position: relative;
    }
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /* position: relative; */
      position: absolute;
      left:60px;
      top: 70px;
    }
    .one {
      width: 100px;
      height: 100px;
      background-color: orangered;
      position: absolute;
      left: 20px;
      top: 30px;
    }
  </style>
</head>
<body>
  <div class="demo">
  <div class="box">
    <div class="one"></div>
  </div>
  </div>
</body>
</html>

绝对定位-参照父盒子的位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>z-index</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 300px;
      height: 300px;
      background-color: green;
      position: absolute;
    }
    .box:hover {
      cursor: pointer;
      z-index: 1; 
    }
    .box2 {
      width: 300px;
      height: 300px;
      background-color: yellow;
      position: absolute;
      left: 150px;
      top: 150px;
      /* 默认是.box2覆盖.box1,如果想让box1覆盖box2就需要给box1设置z-index */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box2"></div>
</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位与浮动</title>
  <style>
    * {
      margin:0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
    }
    .demo {
      background-color: red;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    .box {
      background-color: blue;
      float: left;
      /* z-index: 1px;  无效 */
    }
    
    /* 只有非静态定位的元素才有层级的概念，默认的层级是0，即使层级为0，也会盖住非定位的元素 */
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="demo"></div>
</body>
</html>

浮动与定位

01-元素的隐藏和溢出

display:none/block

visibility:hidden/visible

两者的区别：

display:none的元素，不占原来标准流的位置了，在页面是也看不到了，但是源码中还有对应的标签。

visibility:hidden的元素，占据原来的标准流位置，在页面中看不到，源码中有对应的标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 600px;
      height: 600px;
      border: 1px solid blue;
    }
    .one {
      width: 200px;
      height: 200px;
      border: 1px solid green;
      /* display: none;    不占原来的位置 */
      background-color: green;
      visibility: hidden;   /* 占原来的位置 */
    }
    .two {
      width: 100px;
      height: 100px;
      border: 1px solid lightgreen;
      background-color: green;
    }
    .box:hover .one {
      visibility: visible;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="one"></div>
    <div class="two"></div>
  </div>
</body>
</html>

元素的隐藏和溢出

02-元素内容的溢出隐藏

overflow:hidden;会将超出或是溢出元素的内容给隐藏起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素内容溢出的隐藏</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 300px;
      height: 100px;
      background-color: lightpink;
      /* overflow: hidden;   隐藏超出的内容 */
      /* overflow: visible;    不隐藏超出的内容,默认属性 */
      overflow: auto;   /* 超出的内容会隐藏，但通过下拉框的方式查看 */


    }
  </style>
</head>
<body>
  <div class="box">
    天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣;天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣
  </div>
</body>
</html>

元素内容的溢出隐藏

溢出省略

三个属性:overflow,white-space,text-overflow缺一不可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 1px solid pink;
      overflow: hidden;
      white-space: nowrap;    /* 将文字内容设置为不换行 */
      text-overflow: ellipsis;  /* ellipsis是省略的意思，也就是省略溢出的文本 */
    }
    .box2 {
      width: 200px;
      height: 100px;
      background-color: orange;
      border: 1px solid orange;
       overflow: hidden;
       white-space: nowrap; /* 将文字内容设置为不换行 */
       text-overflow: ellipsis; /* ellipsis是省略的意思，也就是省略溢出的文本 */
    }
  </style>
</head>
<body>
  <div class="box1">
    天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣;天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣;
    天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣;天下事有难易乎，为之，则难者亦易矣,不为，则易者亦难矣;
  </div>
  <div class="box2">this is a test...this is a test...this is a test...this is a test...this is a test...this is a
    test...this is a test...</div>
</body>
</html>

溢出省略

03-光标的样式

cursor: default 默认 | pointer 小手 | move 移动 | text 文本 | help 帮助

最最常用的是 pointer,move;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>鼠标光标样式</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      background-color: deeppink;
    }
    .box:hover {
      /* cursor: default;   默认鼠标样式 */
      /* cursor: pointer;    小手样式 */
      /* cursor: move;   光标样式 */
      /* cursor: help;   帮助样式 */
      /* cursor: text;   文本样式 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

鼠标光标样式

去掉文本框或是文本域的环绕线

outline:none

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .demo {
      width: 600px;
      height: 100px;
      outline: none;    /* 去掉点击时蓝色的环绕线 */
      /* outline是个复合属性,和font、background这类属性类似 */
      /* outline: 10px solid red; */
      /* outline: 10px dotted red; */
      /* outline: 10px dashed red; */
    }
  </style>
</head>
<body>
  <input type="text" class="demo">
</body>
</html>

去掉input框的默认蓝色环绕线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    textarea {
      resize: none;   /* 禁止拖拽大小，以免造成布局混乱 */
      outline: none;  /* 取消环绕线 */
    }
  </style>
</head>
<body>
  <textarea name="" id="" cols="30" rows="10">说点什么吧...</textarea>
</body>
</html>

固定textarea文本域的大小

04-图片和文字的对齐方式

vertical-align: baseline | top | middle | bottom

一般用middle让图片和文字在垂直方向都居中。

还可以使用top,middle,bottom将图片与盒子底部的默认间距给清除。

将图片与盒子底部的默认间距清除掉的方式：

vertical-align:top|middle|bottom 还可以将图片设置为块级元素 display:block

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片的对齐方式</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      border: 1px solid red;
      
    }
    .one {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box img {
      /* display: block; */
      /* vertical-align: middle;   中线对齐 */
      /* vertical-align: top;    顶线对齐 */
      /* vertical-align: bottom;   底线对齐 */
      /* 上面的四种方法都可以去除间隙问题 */
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/3.jpg" title="楚乔传">楚乔传
    <!-- <div class="one"></div>  注释掉后盒子和文字会以基线(baseline)方式对齐,导致盒子和底边框之间有空隙
    1.通过vertical-align的top,middle,bottom其中任意参数就能解决
    2.将img转换为块级标签 -->
  </div>
  <input type="checkbox" name="hejiu" />喝酒
</body>
</html>

解决间隙问题

05-精灵图

1.**为什么要使用精灵图**

为了降低向服务器发送请求的次数
提高页面的加载速度

2.什么是精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

3.精灵图使用本质

利用背景图片的位置属性进行设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精灵图应用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box a {
      width: 90px;
      height: 28px;
      line-height: 28px;
      margin: 200px auto;
      background: url(./img/jd.png) no-repeat 0 -65px;
      border: 1px solid red;
      display: block;
      color: purple;
      padding-left: 22px;
      text-decoration: none;
    }
    .box a:hover {
      background: url(./img/jd.png) no-repeat 0 -380px;
    }

  </style>
</head>
<body>
  <div class="box">
    <a href="#">京东购物车</a>
  </div>
</body>
</html>

精灵图的应用1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精灵图应用2</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    i {
      font-style: none;
    }
    .box {
      width: 248px;
      height: 208px;
      border: 1px solid red;
      margin: 100px auto;
      overflow: hidden;
    }
    ul {
      list-style: none;
      /* li不设置宽度的话,默认是和父元素的宽度一样 */
      width: 252px;
    }
    ul li {
      float: left;
    }
    ul li a {
      width: 62px;
      height: 26px;
      text-align: center;
      padding-top: 44px;
      display: block;
      border-right: 1px solid red;
      border-bottom: 1px solid red;
      position: relative;
    }
    .box li a i {
      width: 24px;
      height: 24px;
      background-color: blue;
      position: absolute;
      left: 17px;
      top: 13px;
      background: url(./img/icons.png) no-repeat;
    }
    .box li:first-child a i {
      background-position: -18px -16px;
    }
    .box li:nth-child(2) a i {
      background-position: -80px -16px;
    }
    .box li:nth-child(3) a i {
      background-position: -142px -16px;
    }
    .box li:nth-child(4) a i {
      background-position: -206px -16px;
    }
    .box li:nth-child(5) a i {
      background-position: -18px -88px;
    }
    .box li:nth-child(6) a i {
    background-position: -80px -88px;
    }
    .box li:nth-child(7) a i {
    background-position: -142px -88px;
    }
    .box li:nth-child(8) a i {
    background-position: -206px -88px;
    }
    .box li:nth-child(9) a i {
      background-position: -18px -158px;
    }
    .box li:nth-child(10) a i {
    background-position: -80px -158px;
    }
    .box li:nth-child(11) a i {
    background-position: -142px -158px;
    }
    .box li:nth-child(12) a i {
    background-position: -206px -158px;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
      <li><a href="#">话费<i></i></a></li>
    </ul>
  </div>
</body>
</html>

精灵图的应用2

06-字体图标

1.精灵图的缺点

1.额外的增加总文件的大小，因为精灵图本质上还是图片

2.会额外的增加http请求次数

3.缩放会失真

2.字体图标的优点：

1.可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..

2.但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...

3.本身体积更小，但携带的信息并没有削减。

4.几乎支持所有的浏览器

5.移动端设备必备良药...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>字体图标的使用</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>
    .icon-shengriliwu {
      font-size: 30px;
      /* color: red; */
    }
    .icon-bingxiang {
      font-size: 30px;
      /* color: cyan; */
      /* font-family: "隶书"; */
    }
  </style>
</head>
<body>
  <span class="iconfont icon-shengriliwu"></span>
  <span class="iconfont icon-bingxiang"></span>
</body>
</html>

font-class字体图标的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>unicode方式的字体图标</title>
  <style>
    @font-face {
       font-family: 'qianduan';
       src: url('./font/iconfont.eot');
       src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
       url('./font/iconfont.woff2') format('woff2'),
       url('./font/iconfont.woff') format('woff'),
       url('./font/iconfont.ttf') format('truetype'),
       url('./font/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
      font-family: "qianduan" !important;
      font-size: 86px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: gold;
    }
  </style>
</head>
<body>
  <div class="iconfont">&#x344e;</div>
</body>
</html>

unicode字体图标的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Symbol的做字体图标</title>
  <script src="./font/iconfont.js"></script>
  <style>
    .icon {
      width: 10em;
      height: 10em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      color: red;
    }
  </style>
</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-yiguanzhu"></use>
  </svg>
</body>
</html>

Symbol字体图标的使用

07-过渡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>过渡</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 谁要变化就给谁添加过渡属性 */
      /* transition-property: width;
      transition-property: height;
      transition-duration: 2s;
      transition-timing-function:ease-in-out; */
      /* 由快到慢 */
      transition: all 1s;
      /* 设置所有的属性,时间为1s */
    }
    .box:hover {
      width: 1600px;
      height: 600px;
    }
    .demo {
      width: 450px;
      height: 300px;
      background: url(./images/1.jpg) no-repeat;
      transition: all 4s;
    }
    .demo:hover {
      background-image: url(./images/2.jpg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="demo"></div>
</body>
</html>

transition

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>transform的使用</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: orangered;
      transition: all 1s;
      border-radius: 50%;
    }
    .box:hover {
      /* transform: translate(100px,100px); */
      /* transform: translateX(300px); */
      transform: translateY(600px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

transform

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>让盒子垂直水平居中对齐</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      position: absolute;
      /* 方法1：使用定位,缺点是宽度高度改变了之后marign-top和marig-left的值也必须跟着改 */
      /* left: 50%;
      top: 50%;
      margin-top: -100px;
      margin-left: -100px; */
      /*方法2：使用transform的translate位置参数设置百分比实现垂直水平居中 */
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);  /* 水平,垂直 */
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

让盒子水平居中对齐的2种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>变形中的缩放</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin: 100px auto;
      transition: all 1s;   /* 过渡 */
    }
    .box:hover {
      transform: scale(1.2);
      transform: scaleX(2);
      transform: scaleY(2);
      transform: scale(.5); /* 缩小 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

变形中的缩放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>变形之旋转</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 300px;
      background-color: orangered;
      margin: 100px auto;
      transition: all 1s;
    }
    .box:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

变形中的旋转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>旋转的扑克牌</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      margin: 100px auto;
      width: 310px;
      height: 438px;
      position: relative;
      /* 设置相对定位 */
      border: 1px solid red;
    }
    .box img {
      position: absolute;
      left: 0;
      left: 0;
      transition: all 2s; /* 添加过渡属性 */
      transform-origin: left bottom;
      /* 设置旋转的圆点 */
    }
    .box:hover img:first-child {
      transform: rotate(60deg);
    }
    .box:hover img:nth-child(2) {
      transform: rotate(120deg);
    }
    .box:hover img:nth-child(3) {
    transform: rotate(180deg);
    }
    .box:hover img:nth-child(4) {
    transform: rotate(240deg);
    }
    .box:hover img:nth-child(5) {
    transform: rotate(300deg);
    }
    .box:hover img:nth-child(6) {
    transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/pk1.png" alt="">
    <img src="./images/pk2.png" alt="">
    <img src="./images/pk1.png" alt="">
    <img src="./images/pk1.png" alt="">
    <img src="./images/pk1.png" alt="">
    <img src="./images/pk2.png" alt="">
  </div>
</body>
</html>

案例-旋转的扑克牌

案例效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>倾斜</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box img {
      transition: all 2s;
    }
    .box:hover img {
      transform: skew(45deg,45deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/s.png" alt="">
  </div>
</body>
</html>

倾斜

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>泡泡</title>
  <style>
    .box {
      width: 343px;
      height: 100px;
      border: 1px solid blue;
      margin: 100px auto;
      background: url(./img/paopao.png) no-repeat left top,
      url(./img/paopao.png) no-repeat right bottom
      #02f;
      transition: all 0.3s;
    }
    .box:hover {
      background: url(./img/paopao.png) no-repeat right bottom,
      url(./img/paopao.png) no-repeat left top
      #02f;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

泡泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>旋转图片</title>
  <style>
    .box {
      width: 767px;
      height: 620px;
      margin: 100px auto;
    }
    .box img {
      width: 100%;
      transition: all 2s;
    }
    .box:hover img {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/s.png" alt="">
  </div>
</body>
</html>

旋转图片

今天学习非常充实，下午上课有点走神了，看来每天睡5个小时并不适合我这种瘦弱的身体，很累，睡了。

posted @ 2019-03-24 00:42 replaceroot 阅读(131) 评论(0) 编辑收藏举报

刷新页面返回顶部

疯狂的瘦子

watch and learn.