css3水滴效果，地图标记效果

最新推荐文章于 2024-04-18 16:40:01 发布

weixin_34221073

最新推荐文章于 2024-04-18 16:40:01 发布

阅读量924

点赞数

原文链接：https://segmentfault.com/a/1190000012716559

版权

图片描述

关键细节：镂空的的背景

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>css3画一个地图标记点效果</title>
    <style>
    body {
        height: 100vh;
        background-color: #0cc;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    span{
        margin: 20px;
    }

    .water-dot {
        position: relative;
        display: inline-block;
        height: 26px;
        width: 16px;
    }

    .water-dot:before,
    .water-dot:after {
        content: '';
        position: absolute;
        display: inline-block;
    }

    .water-dot:before {
        left: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-image: repeating-radial-gradient(8px 8px at 50% 8px, transparent 0%, transparent 3px, #fedcb5 3px, #fedcb5 100%);
    }

    .water-dot:after {
        bottom: 0;
        left: 50%;
        border: 14px solid #fedcb5;
        border-bottom-width: 0;
        border-right-width: 7px;
        border-left-width: 7px;
        transform: translate(-50%,0);
        border-bottom-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
    }


    .water-dot.lg {
        width: 400px;
        height: 616px;
    }

    .water-dot.lg:before {
        width: 400px;
        height: 400px;
        background-image: repeating-radial-gradient(200px 200px at 50% 200px, transparent 0%, transparent 100px, #fedcb5 100px, #fedcb5 100%);
    }

    .water-dot.lg:after {
        border-top-width: 300px;
        border-bottom-width: 0;
        border-right-width: 164px;
        border-left-width: 164px;
    }
    .water-dot.scale-lg{
        transform: scale(5);
    }
    </style>
</head>

<body>
    <span class="water-dot"></span>
    <span class="water-dot lg"></span>
    <span class="water-dot scale-lg"></span>
</body>

</html>

参考：http://www.uiplayground.in/cs...，
https://segmentfault.com/a/11...

weixin_34221073

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3水滴效果，地图标记效果

关键细节：镂空的的背景<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...
复制链接

扫一扫

css3水滴效果，地图标记效果

“相关推荐”对你有帮助么？