HTML5+CSS3从入门到精通 CSS3实现水滴效果，地图标记效果解析-职坐标

HTML5+CSS3从入门到精通 CSS3实现水滴效果，地图标记效果解析

沉沙 2018-07-16 来源：阅读 2075 评论 0

摘要：本篇HTML5教程探讨了CSS3实现水滴效果，地图标记效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+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></span>
    <span class="water-dot lg"></span>
    <span class="water-dot scale-lg"></span>
</body>
 
</html>

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5+css3开发工具 html5+css3从入门到精通下载 web前端开发html5+css3

本文由 @沉沙发布于职坐标。未经许可，禁止转载。