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

图片描述

关键细节：镂空的的背景

<!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...

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

jsoncode

引用和评论

svg实现渐变百分比组件

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式