地图标记点扩散发散动画效果

代码语言:html

所属分类:动画

代码描述:地图标记点扩散发散动画效果

代码标签: 扩散 发散 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style>
        .point,.point::before,.point::after {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            content: '';
        }
        .point::before {
            animation: scale 2s infinite;
        }
        .point::after {
            animation: scale2 2s infinite;
        }
@keyframes scale {
            0% {
                transform: scale(1);
                opacity: .9
            }

            100% {
                transform: scale(6);
                opacity: 0;
            }}
@keyframes scale2 {
            0% {
                transform: scale(1);
                opacity: .9;
            }

            100% {
                transform: scale(12);
                opacity: 0;
            }}


        .point,.point::before,.point::after {
            /* 设置颜色 */
            background-color: rgba(241, 34, 30, .9);
        }
        .point2,.point2::.........完整代码请登录后点击上方下载按钮下载查看

网友评论0