HTML+CSS 常见效果

静态图片动画

1. html

<div class="loader">Loading…</div>

2. css

@keyframes loader {
            to {
                background-position: -800px 0;
            }
        }

        .loader {
            width: 100px;
            height: 100px;
            text-indent: 999px;
            overflow: hidden;
            /* Hide text */
            background: url(http://dabblet.com/img/loader.png) 0 0;
            animation: loader 1s infinite steps(8);
        }

        @keyframes typing {
            from {
                width: 0
            }
        }

        @keyframes caret {
            50% {
                border-right-color: transparent;
            }
        }

文字一个一个展示

1. html

<h1>CSS is awesome!</h1>

2. css

h1 {
           font: bold 200% Consolas, Monaco, monospace;
    /*width: 8.25em;*/
    width: 15ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    animation: typing 8s steps(15),
    caret 1s steps(1) infinite;
}

鼠标移入，下划线两边延长

1. html

<a href="">asfdsdfa</a>

2. css

a{
            text-decoration: none;
        }
        a {
            color: #3F51B5;
            position: relative;
            display: inline-block
        }

        a::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #3F51B5;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out
        }

        a:hover {
            text-decoration: none
        }

        a:hover::after,
        a:active::after {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1)
        }