摘要:本篇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频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号