半透明边框

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);

  }

}

效果如图