zoukankan      html  css  js  c++  java
  • CSS效果

    效果属性

      box-shadow/text-shadow/border-radius/background/clip-path

    box-shadow

    图形阴影

    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        background: red;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5)
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

    内阴影 

    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        background: red;
        box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5)
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

    制作无宽度的border

    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        background: red;
        box-shadow:  0px 0px 0px 5px blue;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

     复制元素

    <style type="text/css">
      .container{
        width: 10px;
        height:10px;
        border-radius: 5px;
        margin-left: 20px;
        background: red;
        box-shadow:  15px 0px 0px 0px blue,-15px 0px 0px 0px green;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

    作用

      营造层次感

      充当没有宽度的边框

       复制元素可以实现一个div制作特殊效果

    text-shadow

      作用 文字立体感

    border-radius

      圆角矩形

      圆角

      半圈/扇形

      一个奇怪的角

    圆角矩形/圆角

    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        border-radius: 10px;
        margin-left: 20px;
        background: red;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     
    半圆/扇形
    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        margin-left: 20px;
        background: red;
        border-radius: 0;
        border-top-left-radius: 50px;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

     一些奇怪的东西

    <style type="text/css">
      .container{
        width: 50px;
        height:50px;
        margin-left: 20px;
        background: #fff;
        border-bottom: 1px solid #000;
        border-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

     background

      纹理、图案

      渐变

        linear-gradient

        radial-gradient

      雪碧图动画

        background-position

      背景图尺寸适应

        background-size:cover/contain

     纹理

    <style type="text/css">
      .container{
        width: 400px;
        height:50px;
        background: linear-gradient(45deg, transparent 0, transparent 49.5%, rgb(0, 0, 0) 49.5%, rgb(0, 0, 0) 50.5%, transparent 50.5%, transparent 100%),
          linear-gradient(135deg, transparent 0, transparent 49.5%, rgb(0, 0, 0) 49.5%, rgb(0, 0, 0) 50.5%, transparent 50.5%, transparent 100%); 
        background-size: 30px 30px;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

     纹理2

    <style type="text/css">
      .container{
        width: 400px;
        height:50px;
        background: linear-gradient(135deg, #000 0%, #000 12.5%, transparent 12.5%, transparent 37.5%, #000 37.5%, #000 62.5%, transparent 62.5%,transparent 87.5%, #000 87.5%,#000 100%);
        background-size: 50px 50px;
      }
    </style>
    <body>
      <div class="container"></div>
    </body>
    View Code
     

     雪碧图动画

    <style>
        .container{
            width: 20px;
            height: 20px;
            background: url('') no-repeat;
            background-size: 20px 40px;
            transition: background-position .4s;
        }
        .container:hover{
            background-position: 0 -20px;
        }
    </style>
    <body>
        <div class="container">
        </div>
    </body>
    View Code

     

     clip-path

       对容器进行裁剪

      常见的几何图形

      自定义路径

    <style type="text/css">
      .container{
        width: 400px;
        height:224px;
        float: left;
        overflow: auto;
        background-image: url(./wow.jpg);
        background-repeat: no-repeat;
        background-size: contain;
      }
      .clip-path{
        clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
      }
    </style>
    <body>
      <div class="container"></div>
      <div class="container clip-path"></div>
    </body>
    View Code

     
     

    http://bennettfeely.com/clippy/

    3D变换

      transform

        translate/scale/skew/rotate

      transform-style: preserve-3d  3D旋转效果

      perspective 元素获得透视效果, 3D立体感

      perspective-origin  观察视角

    <style type="text/css">
      .container{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(-100px);
        text-align: center;
        perspective: 500px;
      }
      .container div{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #000;
        color:#fff;
        transition: transform .4s;
        transform-origin: left center;
        transform: translateZ(-100px);
      }
      .container .page2{
        background-color: green;
      }
      .container:hover .page2{
        transform: translateZ(-100px) rotateY(-135deg);
      }
      
    </style>
    <div class="container">
      <div class="page1">
        preserve-3d/perspective
      </div>
      <div class="page2">
        学习3D变换
      </div>
    </div>
    View Code
    preserve-3d/perspective
    学习3D变换

    3D轮播

    <style type="text/css">
    .wrapper{
      width: 600px;
      height: 337px;
      overflow: hidden;
      font-size: 0;
    }
    .container{
      position: relative;
      width: 600px;
      height: 337px;
      background-size: contain;
      perspective: 500px;
      transform-style: preserve-3d;
    }
    .container .col{
      position: absolute;
      height: 337px;
      width: 100px;
      transform-style: preserve-3d;
      transform-origin: 50% 50% 0;
      transition: transform 1s;
      transform: translateZ(-290px);
    }
    .container:hover .col{
      transform: translateZ(-290px) rotateX(60deg);
    }
    .container .col .row{
      width: 100%;
      height: 337px;
      position: absolute;
      top: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .row1{
      transform: rotateX(0deg) translateZ(290px);
    }
    .row2{
      transform: rotateX(-60deg) translateZ(290px);
    }
    .row3{
      transform: rotateX(-120deg) translateZ(290px);
    }
    .row4{
      transform: rotateX(-180deg) translateZ(290px);
    }
    .row5{
      transform: rotateX(-240deg) translateZ(290px);
    }
    .row6{
      transform: rotateX(-300deg) translateZ(290px);
    }
    .col0{
      left: 0;
    }
    .col1{
      left:100px;
    }
    .col2{
      left: 200px;
    }
    .col3{
      left: 300px;
    }
    .col4{
      left: 400px;
    }
    .col5{
      left: 500px;
    } 
    .dot-wrapper{
      width: 600px;
      text-align: center;
    }
    .dot-wrapper .dot{
      display: inline-block;
      background-color: rgba(0,0,0,.5);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0 5px; 
    }
    .dot-wrapper .dot.active{
      background-color: rgba(0,0,0,1);
    }
    </style>
    <body>
    <div class="wrapper">
      <div class="container">
        <div class="col col0" style="transition-delay: 0s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: 0 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: 0 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: 0 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: 0 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: 0 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: 0 0;"></div>
        </div>
        <div class="col col1" style="transition-delay: 0.2s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: -100px 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: -100px 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: -100px 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: -100px 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: -100px 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: -100px 0;"></div>
        </div>
        <div class="col col2" style="transition-delay: 0.4s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: -200px 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: -200px 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: -200px 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: -200px 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: -200px 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: -200px 0;"></div>
        </div>
        <div class="col col3" style="transition-delay: 0.6s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: -300px 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: -300px 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: -300px 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: -300px 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: -300px 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: -300px 0;"></div>
        </div>
        <div class="col col4" style="transition-delay: 0.8s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: -400px 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: -400px 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: -400px 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: -400px 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: -400px 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: -400px 0;"></div>
        </div>
        <div class="col col5" style="transition-delay: 1.0s;">
          <div class="row row1" style="background-image: url(1.jpg);background-position: -500px 0;"></div>
          <div class="row row2" style="background-image: url(2.jpg);background-position: -500px 0;"></div>
          <div class="row row3" style="background-image: url(3.jpg);background-position: -500px 0;"></div>
          <div class="row row4" style="background-image: url(4.jpg);background-position: -500px 0;"></div>
          <div class="row row5" style="background-image: url(5.jpg);background-position: -500px 0;"></div>
          <div class="row row6" style="background-image: url(6.jpg);background-position: -500px 0;"></div>
        </div>
      </div>
    </div>
    <div id="dots" class="dot-wrapper">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <script type="text/javascript">
      document.querySelector('#dots').addEventListener('click', function(e){
        var obj = e.target
        var dots = document.querySelectorAll('.dot')
        if (obj.tagName.toUpperCase() === 'SPAN') {
          for (var i = 0; i < dots.length; i++) {
            dots[i].className = 'dot'
            if (obj === dots[i]) {
              var cols = document.querySelectorAll('.col')
              for (var j = 0; j < cols.length; j++) {
                cols[j].style = 'transition-delay: ' + (j * 0.2) + 's;transform:translateZ(-290px) rotateX('+60*i+'deg)';
              }
            }
          }
          obj.className='dot active'
        }
      })
    </script>
    </body>
    View Code

    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

      

  • 相关阅读:
    linux嵌入式终端ssh无法输入中文以及删除中文异常
    DNS解析错误导致无法ping通网络
    嵌入式linux 打开ping端口
    嵌入式Linux vim编辑器支持中文
    常见BUG-Web
    考勤项目
    功能测试报告的编写
    04_postman环境变量和身份验证
    03_postman的collection管理
    02_postman断言
  • 原文地址:https://www.cnblogs.com/sonwrain/p/10498434.html
Copyright © 2011-2022 走看看