知识补漏第二期

一.css设置的链接样式：

四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

并且这四个样式的执行顺序：“爱恨情仇”=LVHA=link.visited.hover.active(先后顺序)

二.动画内容回顾：

在为一些网页添加动态画面的时候课以通过动画进行实现。不过在写的时候要记住当在 @keyframes 创建动画，需要把它绑定到一个选择器，否则动画不会有任何效果。并且指定至少这两个CSS3的动画属性绑定向一个选择器：

1.规定动画的名称

2.规定动画的时长

下面图片上展示的是一些动画的相关属性

例如：

//html代码
<div style="width: 1260px;height:605px;background-color: aquamarine;">
        <!-- 冒泡 -->
        <div style="width: 300px;height: 150px;background-color: lightslategray;margin:auto;left:0;right: 0;">
            <ul>
                <li class="one"></li>
                <li class="two"></li>
                <li class="three"></li>
            </ul>
        </div>
        <!-- 圆环 -->
        <div style="position: relative; width: 150px;height:150px;background-color: antiquewhite;margin:auto;">
            <div
                style="position: absolute;width: 110px;height:110px;border-radius: 50%;background-color: white;margin:auto;left:0;right: 0;top: 0;bottom: 0;">
                <div class="qiu"
                    style="width: 65px;height:65px;margin-top: 13px;margin-left: 13px; border:10px solid white;border-radius: 50%;border-top-color: rgba(12, 171, 142, 0.982);">
                </div>
            </div>
        </div>
//css代码
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            height: 150px;
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 30px;
            background-color: rgb(111, 216, 211);
        }

        .one {
            animation: fang 1.2s infinite;
        }

        .two {
            animation: fang 1.2s infinite;
            animation-delay: 0.4s;
        }

        .three {
            animation: fang 1.2s infinite;
            animation-delay: 0.8s;

        }

        @keyframes fang {
            50% {
                background-color: rgb(44, 228, 234);
                transform: scale(1.4);
                /*放大1.1倍*/
                /* background: blue bottom right/50px 50px; */
            }
        }

        .qiu {
            animation: circle 1s infinite linear;
        }

        @keyframes circle {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }