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

  • 相关阅读:
    CSS3中的opacity透明度属性的继承问题如何解决
    webstorm前端开发工具vue环境配置及运行项目
    new String(getBytes(ISO-8859-1),UTF-8)中文编码避免乱码
    超详细多线程讲解
    jQuery mobile 核心功能
    解读四大移动web应用开发框架真相
    2014,成为更好程序员的7个方法
    window8.1使用之快捷键
    C#深入浅出 关键字(一)
    C#深入浅出 C#语法中的重中之重——委托(四)
  • 原文地址:https://www.cnblogs.com/replaceroot/p/10586639.html
Copyright © 2020-2023  润新知