记一些css 3效果

半透明边框

background-clip: 规定背景的绘制区域

.div {
    width: 200px;
    height: 200px;
    background: blue;
    border: 10px solid rgba(255, 170, 170, 0.3);
    background-clip: padding-box;
}

效果如图

技术图片

平行四边形

// 方法一
<div class="skew-ex">
  <div>平行四边形</div>
</div>

.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: tomato;
    color: white;
    transform: skewX(-45deg);
    >div {
      transform: skewX(45deg);
    }
  }

// 方法二
<div class="skew-ex">
  平行四边形
</div>
.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    color: white;
    position: relative;
    &::before {
      content: ‘‘;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: tomato;
      z-index: -1;
      transform: skewX(-45deg);
    }
  }

毛玻璃效果

<div class="glass-ex">
  <div class="glass-bg"></div>
  <div class="main">时间慢慢地带走了本不该留下的，我已经快要想不起来你笑起来的样子，你穿的什么衣服牵着谁的手，突然难过了。我知道自己喜欢你，但我不知道将来在哪，因为我知道，无论在哪里，你都不会带我去，而记忆打亮你的微笑，要如此用力才变得欢喜。
  </div>
</div>

// 主要是main标签的伪元素，设置跟大盒子一样的背景，再把z-index层级小于main，让字在背景上，有个要注意的就是
// 在使用负的z-index来把一个子元素移动到它的父元素下层时，如果父元素的上级元素有背景，则该子元素将出现在他们之后
.glass-ex {
    width: 500px;
    height: 400px;
    background-size: cover;
    margin-top: 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .main {
      width: 440px;
      height: 300px;
      background: rgba(255, 255, 255, 0.3);
      font-size: 14px;
      line-height: 32px;
      display: flex;
      display: -webkit-flex;
      justify-content: flex-start;
      align-items: center;
      padding: 2%;
      position: relative;
      z-index: 9;
      overflow: hidden;
      &::before{
        content: ‘‘;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: url(../../static/img/chai.jpg) no-repeat;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
        margin: -15px;
      }
    }
    .glass-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(../../static/img/chai.jpg) no-repeat;
      background-size: cover;
    }
  }

效果如图
技术图片

闪烁效果

<div class="blink-ex">闪烁效果</div>

.blink-ex {
  color: #009a61;
  animation: 1s blink-smooth 6 alternate; // 缓动闪烁
  animation: 1s blink-smooth 3 steps(1); // 生硬闪烁
}
@keyframes blink-smooth {
  50% {
    color: transparent;
  }
}

轮船背景图移动

<div class="panoramic">轮船过渡效果</div>

.panoramic {
  width: 100%;
  height: 100%;
  background: url(../../static/img/ship.jpg) no-repeat;
  background-size: auto 100%;
  text-indent: -200%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {
  animation-play-state: running;
}

@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

效果如图，鼠标移上去轮船滚动
技术图片

沿环形路径移动的动画效果

<div class="path">
  <div class="avatar">
    <img src="../../static/img/chai.jpg">
  </div>
</div>

.path {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #F2AE43;
  padding: 10px;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform-origin: 50% 150px; /* 150px == 路径的半径 */
    background: tomato;
    display: inline-block;
    animation: spin 6s infinite linear;
    >img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: inherit;
      animation-direction: reverse;
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

效果如图

技术图片