css3动画

html代码:

<div class="buttons">    <button class="fill">fill in</button>    <button class="pulse">pulse</button>    <button class="close">close</button>    <button class="raise">raise</button>    <button class="up">fill up</button>    <button class="slide">slide</button>    <button class="offset">offset</button></div>  

css代码：

*{    box-sizing: border-box;}body{    background: #17181c;}.buttons{    margin: 0 auto;    width: 1000px;    text-align: center;    padding-top: 200px;}.buttons .fill{    --color: #a972cb;    --hover: #cb72aa;}.buttons .pulse{    --color:#ef6eae;    --hover:#ef8f6e;}.buttons .close{    --color:#ff7f82;    --hover:#ffdc7f;}.buttons .raise{    --color:#ffa260;    --hover:#e5ff60;}.buttons .up{    --color:#e4cb58;    --hover:#94e458;}.buttons .slide{    --color:#8fc866;    --hover:#66c887;}.buttons .offset{    --color:#19bc8b;    --hover:#1973bc;}.buttons button{    background: none;    border: 2px solid;    line-height: 1;    margin: 5px;    padding: 15px 35px;    color: var(--color);    -webkit-transition: 0.25s;    position: relative;}.buttons .fill:hover , .fill:focus{    box-shadow: inset 0px 0px 0px 30px var(--hover);}.buttons .pulse:hover , .pulse:focus{    animation: pulse 1s;    box-shadow: 0px 0px 0px 20px rgba(255,255,255, 0);}@keyframes pulse{    0% {        box-shadow: 0 0 0 0 var(--hover);    }}.buttons button:hover, button:hover{    border-color: var(--hover);    color: #fff;}.buttons .close:hover , .close:focus{    box-shadow: inset -55px 0 0 0 var(--hover) , inset 55px 0 0 0 var(--hover);}.buttons .raise:hover , .raise:hover{    box-shadow:0px 6px 4px -3px var(--hover);    transform: translateY(-6px);}.buttons .up:hover , .up:focus{    box-shadow: inset 0px -50px 0px 0px var(--hover) ;}.buttons .slide:hover ,.slide:focus{    box-shadow:inset 100px 0px 0px 0px var(--hover);}.buttons .offset{    box-shadow:3px 3px 0px 0px var(--color) ,-3px -3px 0px 0px var(--color);}.buttons .offset:hover , .offset:focus{    box-shadow: 0px 0px 0px var(--hover) , inset 60px 50px 0px 0px var(--hover);}