js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果
本文實(shí)例講述了js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<html> <head> <title>circle</title> <style type="text/css" > .circle { border-radius:50%; background:#DDDDDD; } .circle_inside { width:80%; height:80%; left:10%; border-radius:50%; background:#494949; position:relative; top:10%; } #circle { margin-left:50%; position:relative; left:-250px; width:500px; height:500px; } </style> <script type="text/javascript" > var c = 'DDDDDD,DFEFFF,494949,C8DB74,46DFDE,59DDDE'.split(','); function create_color() { var color = '', c_length = c.length, random_nmb = Math.floor(Math.random()*c_length); return '#'+c[random_nmb]; } function create_inside_circle(color, id) { return "<div id='"+id+"' class='circle_inside' style='background:"+color+";'></div>"; } function create_all_circle() { var circle_nmb = 15, html = [], id = 0, inside_circle = document.getElementById('circle'); for(var i=0; i<circle_nmb; i++) { id = "circle"+i; inside_circle.innerHTML = create_inside_circle(create_color(), id); inside_circle = document.getElementById(id); } } window.onload = function(){ setInterval(function(){ create_all_circle(); }, 1500); } </script> </head> <body> <div class="circle bg1" id="circle"> </div> </body> </html>
更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《JavaScript動(dòng)畫(huà)特效與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式
這篇文章主要介紹js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式,需要的朋友可以參考下2014-05-05js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法
這篇文章主要介紹了js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法,涉及javascript操作iframe框架的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法,字典即Dictionary,是一種以?鍵-值對(duì)?形式存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu),下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件
這篇文章主要介紹了利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件,文中實(shí)現(xiàn)兩種效果的日期選擇,一種是默認(rèn)參數(shù),點(diǎn)擊日期后直接選擇該日期,另一種是顯示按鈕來(lái)設(shè)置時(shí)間,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01JavaScript實(shí)現(xiàn)日期格式化的操作詳解
在我們做業(yè)務(wù)開(kāi)發(fā)的漫長(zhǎng)歲月里,會(huì)多次跟時(shí)間打交道,相信大多數(shù)小伙伴對(duì)日期格式化也并不陌生,本文簡(jiǎn)單記錄了JavaScript實(shí)現(xiàn)日期格式化的過(guò)程,以及一些拓展,希望對(duì)大家有所幫助2023-05-05模仿JQuery.extend函數(shù)擴(kuò)展自己對(duì)象的js代碼
最近打算寫(xiě)個(gè)自己的js工具集合,把自己平常經(jīng)常使用的方法很好的封裝起來(lái),其中模仿了jq的結(jié)構(gòu)。2009-12-12