简体中文(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學習者快速成長！