4种非常实用的CSS代码段，你都学会了吗？

文字加载...动画

html

创新互联是一家专注于成都网站设计、成都网站制作与策划设计,白云网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:白云等地区。白云做网站价格咨询:13518219792

 
 
 
 
    
  
  
  
  
  1. 正在加载中...
    2.

css

 
 
 
 
    
  
  
  
  
  1. dot{ 
    2. 
  
  
  
  
  2.  display: inline-block; 
    3. 
  
  
  
  
  3.  height: 1em; 
    4. 
  
  
  
  
  4.  line-height: 1; 
    5. 
  
  
  
  
  5.  text-align: left; 
    6. 
  
  
  
  
  6.  vertical-align: -.25em; 
    7. 
  
  
  
  
  7.  overflow: hidden; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. dot::before{ 
    10. 
  
  
  
  
  10.  display: block; 
    11. 
  
  
  
  
  11.  content: '...\A..\A.'; 
    12. 
  
  
  
  
  12.  white-space: pre-wrap; 
    13. 
  
  
  
  
  13.  animation: dot 2s infinite step-start both; 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15. @keyframes dot{ 
    16. 
  
  
  
  
  16.  33% { 
    17. 
  
  
  
  
  17.  transform: translateY(-2em); 
    18. 
  
  
  
  
  18.  } 
    19. 
  
  
  
  
  19.  66% { 
    20. 
  
  
  
  
  20.  transform: translateY(-1em); 
    21. 
  
  
  
  
  21.  } 
    22. 
  
  
  
  
  22. }
    23.

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

 
 
 
 
    
  
  
  
  
  1. 添加图片
    2. 
  
  
  
  
  2. .upload{ 
    3. 
  
  
  
  
  3.  position: relative; 
    4. 
  
  
  
  
  4.  display: inline-block; 
    5. 
  
  
  
  
  5.  width: 76px; 
    6. 
  
  
  
  
  6.  height: 76px; 
    7. 
  
  
  
  
  7.  color: #ccc; 
    8. 
  
  
  
  
  8.  border: 2px dashed; /*边框虚线*/ 
    9. 
  
  
  
  
  9.  text-indent: -12em; /*使其文字看不到*/ 
    10. 
  
  
  
  
  10.  transition: color .25s; /*hover事件：颜色渐变动画*/ 
    11. 
  
  
  
  
  11.  overflow: hidden; 
    12. 
  
  
  
  
  12.  margin: 50px 100px; 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14. /*用before/after伪类做 + 号样式*/ 
    15. 
  
  
  
  
  15. .upload:before, .upload:after{ 
    16. 
  
  
  
  
  16.  content: ''; 
    17. 
  
  
  
  
  17.  position: absolute; 
    18. 
  
  
  
  
  18.  top: 50%; 
    19. 
  
  
  
  
  19.  left: 50%; 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21. .upload:hover{ 
    22. 
  
  
  
  
  22.  color: #34538b; 
    23. 
  
  
  
  
  23. } 
    24. 
  
  
  
  
  24. .upload::before{ 
    25. 
  
  
  
  
  25.  width: 20px; 
    26. 
  
  
  
  
  26.  border-top: 4px solid; 
    27. 
  
  
  
  
  27.  margin: -2px 0 0 -10px; 
    28. 
  
  
  
  
  28. } 
    29. 
  
  
  
  
  29. .upload::after{ 
    30. 
  
  
  
  
  30.  height: 20px; 
    31. 
  
  
  
  
  31.  border-left: 4px solid; 
    32. 
  
  
  
  
  32.  margin: -10px 0 0 -2px; 
    33. 
  
  
  
  
  33. }
    34.

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些 力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

 
 
 
 
    
  
  
  
  
  1. 不规则的投影

css样式

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.  position: relative; 
    3. 
  
  
  
  
  3.  display: inline-flex; 
    4. 
  
  
  
  
  4.  flex-direction: column; 
    5. 
  
  
  
  
  5.  justify-content: center; 
    6. 
  
  
  
  
  6.  vertical-align: bottom; 
    7. 
  
  
  
  
  7.  box-sizing: border-box; 
    8. 
  
  
  
  
  8.  width: 8em; 
    9. 
  
  
  
  
  9.  padding: .5em; 
    10. 
  
  
  
  
  10.  height: 5em; 
    11. 
  
  
  
  
  11.  margin: .6em; 
    12. 
  
  
  
  
  12.  background: #0cc071; 
    13. 
  
  
  
  
  13.  color: #fff; 
    14. 
  
  
  
  
  14.  /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
    15. 
  
  
  
  
  15.  -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
    16. 
  
  
  
  
  16.  filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. .speech { 
    20. 
  
  
  
  
  20.  border-radius: .3em; 
    21. 
  
  
  
  
  21. } 
    22. 
  
  
  
  
  22. .speech::before { 
    23. 
  
  
  
  
  23.  content: ''; 
    24. 
  
  
  
  
  24.  position: absolute; 
    25. 
  
  
  
  
  25.  top: 1em; 
    26. 
  
  
  
  
  26.  right: -.7em; 
    27. 
  
  
  
  
  27.  width: 0; 
    28. 
  
  
  
  
  28.  height: 0; 
    29. 
  
  
  
  
  29.  border: 1em solid transparent; 
    30. 
  
  
  
  
  30.  border-left-color: #0cc071; 
    31. 
  
  
  
  
  31.  border-right-width: 0; 
    32. 
  
  
  
  
  32. }
    33.

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  我是内容 
    5. 
  
  
  
  
  5.  
 
  •  
    •  

  • css样式

     
 
 
 
      
  
  
  
  
    1. .c-pupup{ 
      2. 
  
  
  
  
    2.  position: fixed; 
      3. 
  
  
  
  
    3.  top:0; 
      4. 
  
  
  
  
    4.  bottom: 0; 
      5. 
  
  
  
  
    5.  left: 0; 
      6. 
  
  
  
  
    6.  right: 0; 
      7. 
  
  
  
  
    7.  background: rgba(0,0,0,.5); 
      8. 
  
  
  
  
    8.  text-align: center; 
      9. 
  
  
  
  
    9.  white-space: nowrap; 
      10. 
  
  
  
  
    10.  z-index: 99; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .c-pupup:after{ 
      13. 
  
  
  
  
    13.  content: ''; 
      14. 
  
  
  
  
    14.  display: inline-block; 
      15. 
  
  
  
  
    15.  height: 100%; 
      16. 
  
  
  
  
    16.  vertical-align: middle; 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18. .dialog{ 
      19. 
  
  
  
  
    19.  background-color: #fff; 
      20. 
  
  
  
  
    20.  display: inline-block; 
      21. 
  
  
  
  
    21.  vertical-align: middle; 
      22. 
  
  
  
  
    22.  border-radius: 6px; 
      23. 
  
  
  
  
    23.  text-align: left; 
      24. 
  
  
  
  
    24.  white-space: normal; 
      25. 
  
  
  
  
    25.  width: 400px; 
      26. 
  
  
  
  
    26.  height: 250px; 
      27. 
  
  
  
  
    27. }
      28.

    总结

    这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。

    文章题目：4种非常实用的CSS代码段，你都学会了吗？
    文章出自：http://www.csdahua.cn/qtweb/news8/41208.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    云服务器知识

    分类信息网

    达州托管服务器　　 　电信机房托管服务器　　 　乐山网站建设　　 　成都代办注册公司　　 　成都商城网站建设　　 　成都网站推广公司　　 　达州网站建设　　 　护栏钻孔机　　 　机柜租用　　 　网站改版　　 　高端网站建设　　 　成都展柜定制　　 　成都服装定制　　 　网站建设公司　　 　江油网站建设　　 　虚拟主机　　 　物流公司网站建设方案　　 　重庆小程序开发公司　　 　乐山主机托管　　 　兴久牧业