zoukankan html css js c++ java

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个小时并不适合我这种瘦弱的身体，很累，睡了。

查看全文

相关阅读:
poj 2584 T-Shirt Gumbo (二分匹配)
hdu 1757 A Simple Math Problem (乘法矩阵)
矩阵之矩阵乘法(转载)
poj 2239 Selecting Courses (二分匹配)
hdu 3661 Assignments (贪心)
hdu 1348 Wall (凸包)
poj 2060 Taxi Cab Scheme (二分匹配)
hdu 2202 最大三角形 (凸包)
hdu 1577 WisKey的眼神 (数学几何)
poj 1719 Shooting Contest (二分匹配)

原文地址：https://www.cnblogs.com/replaceroot/p/10586639.html