一些比较实用的css片段

新看了一个帖子，里面好多实用的css代码块，可拿出来当做功能库。先附上该文地址http://segmentfault.com/a/1190000002773955

里面的内容很多我挑了几个经过我验证的来写下

1. 纯css背景噪音，兼容IE8 ，chrome，firefox

 body {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;
            background-image: url(data:image/png;base64,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);*/
            background-color: #0094d0;}

虽然这部分看起来好大一坨，但是不必忧桑，不必害怕，有用的就是background-image，所谓的背景噪音就是看上去像是电视下雪花的状态，总体来说还是挺有用的，比纯色内容给人感觉丰富些，拿来用用也不错

2.为标题图片隐藏文本

这个实际上是为了seo,在样式上并没有什么卵用。

 1 .logo {
 2             text-indent: -9999px;
 3             margin: 0 auto;
 4             width: 320px;
 5             height: 320px;
 6             background: transparent url("img/6.jpg") no-repeat ;
 7         }
 8
 9
10 <h1 class="logo">标题是否隐藏了呢</h1>

把html和css放一起了，这样是不对的，但是想偷个懒，所以就这样喽，这段有用的是text-indent

　　3.清除浮动新法

long long ago,清除浮动我用的方法是最经典的

 1 .clearfix:after {
 2 content: ".";
 3 display: block;
 4 clear: both;
 5 visibility: hidden;
 6  line-height: 0;
 7 height: 0;
 8 }
 9
10 .clearfix { display: inline-block; }

看了这个帖子之后立马尝试了一下这个新方法，兼容IE8哦

 .clearfix:before,.container:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

　　代码减半，效果不打折~但是需要注意的是，要把包含浮动的容器加一个class相当于css中的.container否则不能生效的说~

　　4.动态加载动画，省略号..变成...

 .loading:after {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
            animation: ellipsis 2s infinite;
            content: "\2026"; /* ascii code for the ellipsis character */
        }
        @keyframes ellipsis {
            from {
                width: 2px;
            }
            to {
                width: 15px;
            }
        }

　　使用css3的动画，使包含省略号容器的长度变长变短，无限循环

　　5、全屏背景

body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: url(‘img/9.jpeg‘) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}

嗯，使用了一下这个方法，但是感觉不太理想，因为这个background-size: cover是让背景扩展的无限大直到可以适应浏览器窗口（尽量保持了图片的原有比例），但是图像的某些部分就无法显示在窗口中了，这样如果背景图像中有一些比较重要的要素可能就被截掉了，看不到的说，我推荐使用background-size: 100% 100%,这个属性也是让背景图片铺满全屏，但是不会去截图像而是让图片尽量全部显示，不足是牺牲了图片原来的比例，不过我觉得比少个头之类的好多了

嗯，就这么多啦，有新内容再补充~