zoukankan      html  css  js  c++  java
  • 记一些css 3效果

    半透明边框

    background-clip: 规定背景的绘制区域
    .div {
         200px;
        height: 200px;
        background: blue;
        border: 10px solid rgba(255, 170, 170, 0.3);
        background-clip: padding-box;
    }
    

    效果如图

    clipboard.png

    平行四边形

    // 方法一
    <div class="skew-ex">
      <div>平行四边形</div>
    </div>
    
    .skew-ex {
         200px;
        height: 40px;
        line-height: 40px;
        background: tomato;
        color: white;
        transform: skewX(-45deg);
        >div {
          transform: skewX(45deg);
        }
      }
    
    // 方法二
    <div class="skew-ex">
      平行四边形
    </div>
    .skew-ex {
         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 {
         500px;
        height: 400px;
        background-size: cover;
        margin-top: 30px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .main {
           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;
           100%;
          height: 100%;
          background: url(../../static/img/chai.jpg) no-repeat;
          background-size: cover;
        }
      }

    效果如图
    clipboard.png

    闪烁效果

    <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 {
       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;
      }
    }

    效果如图,鼠标移上去轮船滚动
    clipboard.png

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

    <div class="path">
      <div class="avatar">
        <img src="../../static/img/chai.jpg">
      </div>
    </div>
    .path {
       300px;
      height: 300px;
      border-radius: 50%;
      background: #F2AE43;
      padding: 10px;
      .avatar {
         40px;
        height: 40px;
        border-radius: 50%;
        transform-origin: 50% 150px; /* 150px == 路径的半径 */
        background: tomato;
        display: inline-block;
        animation: spin 6s infinite linear;
        >img {
           100%;
          height: 100%;
          border-radius: 50%;
          animation: inherit;
          animation-direction: reverse;
        }
      }
    }
    
    @keyframes spin {
      to {
        transform: rotate(1turn);
      }
    }

    效果如图

    clipboard.png

  • 相关阅读:
    javascript中的screen对象
    javascript的navigator对象
    Javascript的location对象
    javascript 关于闭包的知识点
    微信小程序教程(第三篇)
    微信小程序----关于变量对象data 和 前端wxml取后台js变量值
    微信小程序教程(第四篇)
    微信小程序教程(第二篇)
    微信小程序教程(第一篇)
    操作文件的方法
  • 原文地址:https://www.cnblogs.com/10manongit/p/13020414.html
Copyright © 2011-2022 走看看