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

posted on 2019-03-08 21:39 苏荷酒吧阅读(233) 评论(0) 编辑收藏举报