Css3的animation屬性實現雷達擴散效果
最終實現效果網址http://www.east.com.cn/(在網頁底部可以看到)
html程式碼
<section id="map">
<div>
<a href="" class="circle"></a>
<a href="" class="ripple p1"></a>
<a href="" class="ripple p2"></a>
<a href="" class="ripple p3"></a>
</div>
</section>
css程式碼
#map {
width: 100%;
height: 270px;
position: relative;
height: 450px;
overflow: hidden;
margin-top: 20px;
background: url(../../image/map.png) center center no-repeat;
}
#map div {
width: 1200px;
margin: 0 auto;
position: relative;
}
#map div .circle {
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background: #7abefd;
top: 153px;
left: 622px;
z-index: 12;
margin-bottom: 0px;
}
#map div a {
display: block;
}
#map div .ripple {
border-radius: 50%;
background-clip: padding-box;
background: transparent;
width: 140px;
height: 140px;
border-radius: 50%;
position: absolute;
left: 558px;
top: 88px;
z-index: 9;
margin-bottom: 0px;
}
#map div .p1:after,
#map div .p2:after,
#map div .p3:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #75abfa;
opacity: 0;
background-color: rgba(160, 195, 244, .5);
}
#map div .p1:after{
-webkit-animation: ripple 4.5s ease-out 225ms infinite;
animation: ripple 4.5s ease-out 225ms infinite;
}
#map div .p2:after{
-webkit-animation: ripple 4.5s ease-out .9s infinite;
animation: ripple 4.5s ease-out .9s infinite;
}
#map div .p3:after{
-webkit-animation: ripple 4.5s ease-out 1.8s infinite;
animation: ripple 4.5s ease-out 5.8s infinite;
}
@-webkit-keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(.1)
}
5% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(.1);
transform: scale(.1)
}
5% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
相關推薦
Css3的animation屬性實現雷達擴散效果
最終實現效果網址http://www.east.com.cn/(在網頁底部可以看到)html程式碼<section id="map"> <div> <a href="" class="circle"></a>
CSS中的pointer-events屬性實現點穿效果
CSS的pointer-events屬性 auto:與 pointer-events 屬性未指定時的表現效果相同。 none:該元素永遠不會成為滑鼠事件的 target。但是,當其後代元素的 pointer-events 屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情況下,滑
QT與arduino互動實現雷達掃描效果
我們前面用processing實現了雷達掃描效果,但processing畢竟不能用來做系統,不能作為一個比較完善的軟體釋出。這裡我們用QT來實現與arduino的互動及雷達掃描效果。 QT繪圖沒有基礎的,可以參考我部落格中的《QT零基礎繪圖》系列。 一、建立雷達掃描顯示工程及對話方塊
css3中的3d屬性實現一個星空效果
在css3新增屬性的學習中,有關3d的知識,下面是利用transform屬性的3d效果做的一個星空中星球圍繞太陽旋轉,實現了自轉和公轉效果;話不多說,直接code: HTML: <!DOCTYPE html> <html> <head>
CALayer mask屬性實現蒙板效果
相信很多人在ios上實現控制元件圓角的時候都用過:cornerRadius這個屬性,例如實現圓形頭像,一般我會這麼寫: self.headImageView.layer.masksToBounds = YES;self.headImageView.layer.corner
transition屬性實現hover漸變動畫效果
span style -o 效果 web 自定義 動畫效果 microsoft 默認 transition:顏色 變換延續的時間 變換速率 transition:background-color 0.3s linear 變換速率: 1、ease:(逐漸變慢)默認值,ease
easyui 如何為標籤動態追加屬性實現渲染效果
簡述一下在專案遇到的問題,這邊有一個需求,選擇不同型別,載入不同的div標籤(其中屬性是否必填是區分型別的關鍵) html介面是這樣的 <div class="grid_1 lbl">規則型別:</div> <div class="grid_3 val"><
Android Shader渲染以及實現水波紋霓虹文字雷達等效果
Shader概述 Shader是繪圖過程中的著色器,實現繪製各種不同的效果,比如映象,水波紋,雷達等等,Shader有以下五個子類: - BitmapShader用於Bitmap圖片的渲染 - ComposeShader用於混合渲染 - LinearGradient用於線性渲染
手把手教你打造一個高仿雷達掃描效果和仿水波紋中心擴散效果
高仿雷達掃描效果和仿水波紋中心擴散效果,手把手教你擼一個炫酷的自定義view。我們先看效果圖吧對於仿水波紋中心擴脈衝效果思路大家一看就應該知道,一張圖片在不斷的放大,且顏色漸變。那不就是自定義屬性動畫嗎沒錯就是這麼神奇。ScaleAnimation+AlphaA
Android屬性動畫上手實現各種動畫效果,自定義動畫,拋物線等
在上一篇Android基礎動畫,組合動畫,幀動畫,佈局動畫,Activity跳轉動畫中我寫了基礎動畫的用法,那麼這次我們來看Android屬性動畫上手實現各種效果,包括實現基本的透明度,縮放,平
Android自定義View實現類似水波擴散效果
自定義View一共分為6步第一步public SpreadView(Context context) { this(context,null,0); } public SpreadView(Context context, @Nullable AttributeSe
Android 兩種方式實現類似水波擴散效果
amp round ini 視覺差 arr arraylist inf nim you 兩種方式實現類似水波擴散效果,先上圖為敬 自定義view實現 動畫實現 ### 自定義view實現 思路分析:通過canvas畫圓,每次改變圓半徑和透明度,當半徑達到一定程度,再次
TextView設定android:ellipsize="marquee"屬性,無法實現跑馬燈效果的解決方法
TextView動態賦值時,需要在java程式碼中設定跑馬燈效果才能生效 private void setTextMarquee(TextView textView) {
outline和outline-offset屬性實現簡單的縫邊效果
shadow 一個 htm com utf-8 實現 現在 自己 mar 如果現在有個需求,讓你實現下面的樣式,你會怎麽做呢? 我首先想到的是用 border + box-shadow 實現,代碼如下 div {
css動畫屬性實現心臟跳動的小demo效果
前言 今天總結了很多css動畫屬性相關知識,就把前幾天做的動畫屬性做的小demo,順帶總結到我的CSDN中,便於自己對於知識的加深。直戳要點了: 實現思路 1.文件結構,使用偽元素建立兩個小模組,使
藉助 CAGradientLayer 可以設定漸變色的屬性 實現蘇寧易購首頁導航欄的效果
實現如標題所示的功能使用的核心程式碼如下 //初始化漸變層 self.gradientLayer = [CAGradientLayerlayer]; self.gradientLayer.frame = CGRectMake(0, 0, self.view.frame
Unity 屬性雷達圖效果
最終效果圖: 遊戲中難免會展示英雄的各個屬性值,雷達圖是比較簡潔直觀並且符合使用者習慣的展示方式之一。3D中生成的任何面都是由一個個三角形組成的,要實現圖中的效果我們需要在程式中動態生成正五邊形面片,我們需要六個頂點(包含中心點)。設中心點O為(0,0),經過x軸的頂點
Android 雷達掃描效果實現
在eoe看到有一篇關於雷達掃描的文章,然後看了下,很簡單,但是覺得還有很多可以優化的地方,下面貼出來 package com.example.wave; import android.content.Context; import android.graphics.Can
CSS3 動畫實現放大縮小、漣漪擴散效果、疊加圖片迴圈來回顯示
一、無限放大縮小,可以應用於跳動的氣球等場景,效果如下 html部分 <div class="ballon"></div> css部分 @keyframes sca
openlayers4實現點的擴散效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link