一个简单的动画

html

     Loading     
        
    
复制代码

css部分

body{    height:200px;    width:200px;    position:relative;}.loading::before,.loading::after{    content:'';    position:absolute;    //在设置了绝对定位以后,可以利用一下五个语句实现x和y方向居中    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    //一个参数为写好的关键帧,第二个参数为变化时间,第三个参数是线性变化,    第四个参数规定不停变化.    animation: load 2s linear infinite;    background: grey; }.loading::after{    animation-delay: 1s;        //延迟一秒出现}@keyframes load{    from{        width: 0; height: 0; opacity: 1;    }    to{        width: 100px; height: 100px; opacity: 0;    }}复制代码

文字的动态下划线

html部分

  
      JS Bin  
    
         么么哒  
    
复制代码

css部分

//下划线width从0到文字的长度@keyframes lefttoright{    from{        width:0;    }    to{        width:100%;    }}.underline{    display:inline;   //设置为内联元素,如果是块级元素会导致下划线长度变为"一整行"    position:relative;    font-size:50px;}.underline:hover::after{    content:'';    top:100%;               //下划线出现在文字的下端    left:0;                 //下划线与文字左侧对齐    position:absolute;    background:3px;    color:cyan;    animation: lefttorigt 1s;}复制代码