使用CSS3設(shè)計(jì)地圖上的雷達(dá)定位提示效果
設(shè)計(jì)達(dá)人 發(fā)布時(shí)間：2016-04-05 11:01:55 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用CSS3設(shè)計(jì)地圖上的雷達(dá)定位提示效果的實(shí)例,即文中所說(shuō)的水波漣漪效果,能夠控制寬高和透明度,需要的朋友可以參考下
近期工作要做一個(gè)用于圖像定位的標(biāo)識(shí)，為了讓這個(gè)指示標(biāo)識(shí)不死板，決定做個(gè)簡(jiǎn)單的動(dòng)畫(huà)，動(dòng)畫(huà)效果像波浪一樣波動(dòng)，這樣標(biāo)識(shí)就更美觀好看了，喜歡的同學(xué)可以跟著來(lái)學(xué)，十分簡(jiǎn)單，歡迎指正交流。
先上效果圖：
本動(dòng)畫(huà)需要用到的主要屬性：animation, transition 和 Keyframes 屬性
Step 1:HTML 代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="example">
- <div class="dot"></div>
- </div>
Step 2: CSS樣式：設(shè)置animation屬性
CSS Code復(fù)制內(nèi)容到剪貼板
- .dot:before{
- content:' ';
- position: absolute;
- z-index:2;
- left:0;
- top:0;
- width:10px;
- height:10px;
- background-color: #ff4200;
- border-radius: 50%;
- }
- .dot:after {
- content:' ';
- position: absolute;
- z-index:1;
- width:10px;
- height:10px;
- background-color: #ff4200;
- border-radius: 50%;
- box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
- -webkit-animation-name:'ripple';/*動(dòng)畫(huà)屬性名，也就是我們前面keyframes定義的動(dòng)畫(huà)名*/
- -webkit-animation-duration: 1s;/*動(dòng)畫(huà)持續(xù)時(shí)間*/
- -webkit-animation-timing-function: ease; /*動(dòng)畫(huà)頻率，和transition-timing-function是一樣的*/
- -webkit-animation-delay: 0s;/*動(dòng)畫(huà)延遲時(shí)間*/
- -webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無(wú)限次*/
- -webkit-animation-direction: normal;/*定義動(dòng)畫(huà)方式*/
- }
設(shè)置動(dòng)畫(huà)方式，像波浪一樣，從小變大變無(wú)，所以我們要設(shè)置寬高從0 – 50px，透明度從有至無(wú)，這樣就能實(shí)現(xiàn)水波漣漪效果啦。
CSS Code復(fù)制內(nèi)容到剪貼板
- @keyframes ripple {
- 0% {
- left:5px;
- top:5px;
- opcity:75;
- width:0;
- height:0;
- }
- 100% {
- left:-20px;
- top:-20px;
- opacity: 0;
- width:50px;
- height:50px;
- }
- }
效果完成了，此案例比較適合圖像定位標(biāo)識(shí)用，當(dāng)然還可以有更好的方案去代替，完善這個(gè)樣式與動(dòng)畫(huà)效果。
相關(guān)文章
純css3實(shí)現(xiàn)的地圖位置標(biāo)記動(dòng)態(tài)顯示效果源碼
這是一款基于純css3實(shí)現(xiàn)的地圖位置標(biāo)記動(dòng)態(tài)顯示效果源碼。畫(huà)面上類(lèi)似百度地圖位置標(biāo)記的圖標(biāo)呈現(xiàn)垂直緩沖降落的動(dòng)畫(huà)效果，且降落后位置固定的圖標(biāo)底部帶有擴(kuò)散顯示圓環(huán)的動(dòng)2017-05-29
html5+css3實(shí)現(xiàn)的世界地圖區(qū)域劃分效果源碼
這是一款基于html5+css3實(shí)現(xiàn)的世界地圖區(qū)域劃分效果源碼，是一款鼠標(biāo)移動(dòng)地圖上高亮顯示對(duì)應(yīng)區(qū)域劃分塊效果的特效代碼?？捎行ы憫?yīng)鼠標(biāo)事件實(shí)現(xiàn)地圖不規(guī)則形狀的樣式變換功2015-11-12
CSS3地圖動(dòng)態(tài)實(shí)例代碼(圓圈向外擴(kuò)散)
這篇文章主要介紹了CSS3地圖動(dòng)態(tài)實(shí)例代碼(圓圈向外擴(kuò)散),主要考察CSS3中動(dòng)畫(huà)的使用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-15
