css小零件

发表于 | 分类于 | 评论数：
本文字数： 3.9k | 阅读时长 ≈ 7 分钟

实用的css小部件

文字加载动画

html

1
加载中<dot>这个被隐藏了</dot>

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
25
dot {
       display: inline-block;
       height: 1em;
       line-height: 1;
       text-align: left;
       vertical-align: -.1.5em;
       overflow: hidden;
   }

   dot::before {
       display: block;
       content: '...\A..\A.';
       white-space: pre-wrap;
       animation: dot 2s infinite step-start both;
   }

   @keyframes dot {
       33% {
           transform: translateY(-2em);
       }

       66% {
           transform: translateY(-1em);
       }
   }

要点

1
在dot插入伪类before让其在Y轴上运动，通过overflow: hidden;隐藏从而达到加载动画效果

如何我将overflow: hidden;去掉你就会明白

演示

仿上传边框

html

1
2
<label for="updata" class="upload"></label>
<input type="file" id="updata" hidden="true">

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
25
26
27
28
29
30
31
32
33
34
35
36
37
.upload {
       position: relative;
       display: inline-block;
       width: 100px;
       height: 100px;
       color: #ccc;
       border: 2px dashed;
       text-indent: -12em;
       transition: color .35s ease-in-out;
       overflow: hidden;
       margin: 50px 100px;
       outline: none;
   }

   .upload::before,
   .upload::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
   }

   .upload:hover {
       color: #34538b;
   }

   .upload::before {
       width: 40px;
       border-top: 4px solid;
       margin: -2px 0 0 -20px;
   }

   .upload::after {
       height: 40px;
       border-left: 4px solid;
       margin: -20px 0 0 -2px;
   }

要点

1
很简单，知道伪类就行，自行体会

演示1

不规则投影，小尾巴

html

1
2
3
<div class="speech">
       helloworld
</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
25
26
27
28
29
30
31
div.speech {
       position: relative;
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       vertical-align: bottom;
       box-sizing: border-box;
       width: 8em;
       padding: 1em;
       height: 5em;
       margin: .6em;
       background: #11ca7a;
       color: #fff;
       -webkit-filter: drop-shadow(.1em .1em .3em rgba(0, 0, 0, .5));
       filter: drop-shadow(.1em .1em .3em rgba(0, 0, 0, .5));
   }

   .speech {
       border-radius: .3em;
   }

   .speech::before {
       content: '';
       position: absolute;
       left: -.7em;
       width: 0;
       height: 0;
       border: 1em solid transparent;
       border-right-color: #11ca7a;
       border-left-width: 0;
   }

要点

1
至于ie不兼容drop-shadow，我只想说他真是坨翔一样的浏览器!

5d0794dc0081d82394

为啥不用box-shadow？

1
2
因为元素添加了伪元素或者有需求为半透明的的装饰时候，
box-shadow显得有点无力，而且border-radius会无耻的忽略透明部分。

对话气泡小尾巴

1
对话汽包，他的小尾巴通常由伪元素生成

案例

css自适应弹框

html

1
2
3
4
5
6
7
8
<div class="c-pupup">
      <div class="dialog">
          <div class="header">标题</div>
          <div class="content">
              拟态框
          </div>
      </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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.c-pupup {
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: rgba(0, 0, 0, .5);
       text-align: center;
       white-space: nowrap;
       z-index: 99;
   }

   .c-pupup::after {
       content: '';
       display: inline-block;
       height: 100%;
       vertical-align: middle;
   }

   .dialog {
       background-color: #fff;
       display: inline-block;
       vertical-align: middle;
       border-radius: 6px;
       text-align: left;
       white-space: normal;
       width: 400px;
       height: 255px;
   }

   .header::after {
       content: ' ';
       display: block;
       height: 1px;
       background: rgba(0, 0, 0, .5);
       transform: scale(1, .5);
       margin: 1em 0;
   }

   .content {
       text-align: center;
   }

要点

1
这个没有啥好说的，设置居中就好，代码自行体会
1
最后教大家画 .5px的线,用scale来实现，高为1px
1
transform: scale(1,.5)

演示

Δ~~~~Δ
ξ •ェ• ξ
ξ　~　ξ
ξ　　 ξ
ξ　　　“~～~～〇
ξ　　　　　　 ξ
ξ　ξ　ξ~～~ξ　ξ
　ξ_ξξξ　ξξξ_ξ
　　ヽ(´•ω•)ノ
　　　 |　 /
　　　 UU”

本文结束谢谢大家的阅读

坚持技术分享，您的支持将鼓励我继续创作！
0%