更新于 

css样式

跟随滚动变色的图片

原网址：ElementUI中文官网https://element.eleme.cn/#/zh-CN

实现对角线的几种方式

children:tabs
对角线样式
对角线样式
HTML
1
2
3
4
<div class="border-wrapper">
  <div class="border-inner"></div>
  <div class="border-mask"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.border-wrapper{
  width:100px;
  height:100px;
  border:1px solid #000000;
  position:relative;
  overflow: hidden;
}
.border-inner{
  position:absolute;
  top:0;
  left:0;
  border-left: 100px solid #000000;
  border-top:100px solid rgba(0, 0, 0, 0);
  background: #fff;
}
.border-mask{
  position:absolute;
  top:1px;
  left:0;
  border-left: 100px solid #ffffff;
  border-top:100px solid rgba(0, 0, 0, 0);
  background: #00000000;
}

HTML
1
<div class="background-wrapper"></div>
CSS
1
2
3
4
5
6
.background-wrapper{
    width:100px;
    height: 100px;
    border:1px solid #000000;
    background: linear-gradient(45deg,#fff 49%,#000,#fff 50%);
}
HTML
1
2
3
<div class="clip-path-wrapper">
    <div class="clip-path-inner"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
.clip-path-wrapper{
    width:100px;
    height:100px;
    border:1px solid #000000;
}
.clip-path-inner{
    width:100%;
    height:100%;
    background: #000;
    clip-path: path('M0.5 0 L100 99.5 L99.5 100 L0 0.5');
}

sprite精灵图实现gif效果

精灵图效果参考地址

精灵图实现动态图片效果的原理类似与电影胶卷，
通过快速分布平移，实现动态效果：

1
<div class="sprite-bg"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.sprite-bg{
      width:100%;
      height:100%;
      background-image: $spriteBgImg;
      background-position: top;
      background-size:100% auto;
      filter:brightness(1.3);
      animation: anime-effect 0.5s steps(30);
      animation-iteration-count: infinite;
      @keyframes anime-effect{
        0%{
          background-position: 0px 0px;
        }
        100%{
          background-position: 0px -15015px;
        }
      }
    }

最终实现效果：