简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

css3写的地图坐标_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:49:18
原创
1409 人浏览过

看到别的网站有个这么个小东西，感觉挺有趣就模范着做了下，只支持了webkit内核的 浏览器。
html代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/demo_1.css" /></head><body><div class='pin'></div><div class='pulse'></div></body></html>css3代码html {height: 100%;}body {background: #2f2f2f;}.pin{width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;background: #89849b;-webkit-transform: rotate(-45deg);-webkit-border-radius: 50% 50% 50% 0;-webkit-animation: 1s bounce;}.pin:after{content: “”;width: 40px;margin: 30px 0 0 30px;height: 40px;background:#2f2f2f;-webkit-border-radius: 50%;position: absolute;}.pulse {background: rgba(0,0,0,0.2);-webkit-border-radius: 50%;border-radius: 50%;height: 40px;width: 40px;position: absolute;left: 50%;top: 50%;margin: 105px 0px 0px 30px;-webkit-transform: rotateX(65deg);z-index: -2;}.pulse:after{content: “”;width: 120px;height: 120px;position: absolute;-webkit-box-shadow: 0 0 1px 2px #89849b;-webkit-border-radius: 50%;margin: -40px 0 0 -40px;-webkit-animation: 1s mapLight infinite;-webkit-animation-delay: 1.2s;}@-webkit-keyframes mapLight{0%{opacity: 0;-webkit-transform: scale(0.1,0.1);}50{opacity: 1;}100{-webkit-transform: scale(1.2,1.2);opacity: 0;}}@-webkit-keyframes bounce{0%{opacity: 0;-webkit-transform: translateY(-2000px) rotate(-45deg);}60%{opacity: 1;-webkit-transform: translateY(30px) rotate(-45deg);}80%{-webkit-transform: translateY(-10px) rotate(-45deg);}100%{-webkit-transform: translateY(0) rotate(-45deg);}}
登录后复制

 

相关标签：
css3写的地图坐标
来源：php.cn
上一篇：前端架构搭建心得_html/css_WEB-ITnose 下一篇：CSS3和SVG炫酷鼠标点击按钮效果_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
如何检查坐标是否在 PHP 中的边界对象内？ 我有一些坐标，我想检查这些坐标是否恰好在谷歌地图范围内（东北和西南）。示例：AvailableLat:40.712776AvailableLong:-74.005974我想知道上面...
来自于 2024-04-05 00:25:54
0
1
1401
在网站页面中使用本地安装的库 是否可以在现代浏览器中使用为Windows操作系统编写并在system32中注册的库（.dll、.ocx），将站点工作和计算的部分逻辑从服务器转移到服务器的权力本地机器？例如，如果...
来自于 2024-04-05 00:15:49
0
1
3563
汇总两个独立表的销售数据时遇到 MySQL 问题 预先非常感谢您的支持。我正在学习SQL并生成一些数据来玩，但我坚持做一件简单的事情。下面屏幕截图中的表格显示了我的sales20表的一部分，该表显示了每个员工在2020年实现的销售...
来自于 2024-04-04 14:22:13
0
2
343
创建一个悬停效果，将菜单按钮转换为具有阴影克隆版本的 x 形状 首先我想承认我的标题很令人困惑，对此感到抱歉。我想要实现的是悬停时的以下效果：我的网站在这里https://wordpress-493302-3130963.cloudwaysap...
来自于 2024-04-04 11:55:21
0
2
315
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！