一个简单的动画

html

<!DOCTYPE html>
<html>
<head>
    <title> Loading </title>
    <meta charset=utf-8>
</head>
<body>
    <div class="loading"></div>
</body>
</html>

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部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class='underline'>
    么么哒
  </div>
</body>
</html>

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;
}

一个简单的加载动画和hover后动态出现的下划线

一个简单的动画

html

css部分

文字的动态下划线

html部分

css部分