css动画- 热点图案例

最新推荐文章于 2024-09-26 10:01:01 发布

熬夜肝代码de吗喽

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量196

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/wzl0504/article/details/141072741

版权

1.body部分（写好我们的框架）


    <div>
        <div class="dotted"></div>
        <div class="pulse1"> </div>
        <div class="pulse2"> </div>
        <div class="pulse3"> </div>
    </div>

2.css部分

 div {
            width: 200px;
            height: 300px;
            background-color: #696969;
            position: relative;
        }

        div.dotted {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background-color: pink;
            border-radius: 50%;
            font-size: 0;

        }

        div div[class^=pulse] {
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: transparent;
            border-radius: 50%;
            box-shadow: 0px 0px 4px pink;
            animation: move 1.2s linear infinite;
        }

        @keyframes move {

            0% {
                /* transform: scale(1);
                一般不用scale，因为会把阴影一起放大 不好看 */
            }

            75% {
                width: 30px;
                height: 30px;
                opacity: 1;
            }

            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }

        div div.pulse2 {
            animation-delay: 0.4s;
        }

        div div.pulse3 {
            animation-delay: 0.8s;
        }
    </style>

3.最终可以做成波纹动画

特别注意：transform：translate使居中样式更灵活！！