欢迎光临
我们一直在努力着
       

HTML闪电绘制文字动画特效附源码,要的来下载

html闪电绘制文字动画特效,效果还是非常好看的

效果图:

HTML闪电绘制文字动画特效附源码,要的来下载-念楠竹

演示地址:http://艹.host/html闪电绘制文字动画特效演示.html

完整代码:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5 canvas闪电绘制文字动画特效www.niannz.com</title> <style> .page-thunder-to-text { position: relative; overflow: hidden; } .page-thunder-to-text canvas { display: block; } .page-thunder-to-text input { position: absolute; bottom: 50px; left: 0; right: 0; display: block; outline: none; background-color: rgba(38, 50, 56, 0.2); color: #ffffff; border: none; width: 50%; min-width: 500px; max-width: 100%; margin: auto; height: 60px; line-height: 60px; font-size: 40px; padding: 0 20px; } .page-thunder-to-text input:hover, .page-thunder-to-text input:focus { border: 1px solid rgba(38, 50, 56, 0.6); } .page-thunder-to-text input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.1); } </style> </head> <body> <div class="page page-thunder-to-text"> <input id="input" type="text" maxlength="24" placeholder="念楠竹网站-创新科技未来"> <canvas id="canvas"></canvas> </div> <script> let canvas, ctx, w, h, thunder, text, particles, input; function Thunder(options) { options = options || {}; this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10); this.maxlife = this.lifespan; this.color = options.color || '#fefefe'; this.glow = options.glow || '#2323fe'; this.x = options.x || Math.random() * w; this.y = options.y || Math.random() * h; this.width = options.width || 2; this.direct = options.direct || Math.random() * Math.PI * 2; this.max = options.max || Math.round(Math.random() * 10 + 20); this.segments = [...new Array(this.max)].map(() => { return { direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1), length: Math.random() * 20 + 80, change: Math.random() * 0.04 - 0.02 }; }); this.update = function(index, array) { this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) }); (this.lifespan > 0 && this.lifespan--) || this.remove(index, array); } this.render = function(ctx) { if (this.lifespan <= 0) return; ctx.beginPath(); ctx.globalAlpha = this.lifespan / this.maxlife; ctx.strokeStyle = this.color; ctx.lineWidth = this.width; ctx.shadowBlur = 32; ctx.shadowColor = this.glow; ctx.moveTo(this.x, this.y); let prev = { x: this.x, y: this.y }; this.segments.forEach(s => { const x = prev.x + Math.cos(s.direct) * s.length; const y = prev.y + Math.sin(s.direct) * s.length; prev = { x: x, y: y }; ctx.lineTo(x, y); }); ctx.stroke(); ctx.closePath(); ctx.shadowBlur = 0; const strength = Math.random() * 80 + 40; const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength); light.addColorStop(0, 'rgba(250, 200, 50, 0.6)'); light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)'); light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)'); light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)'); light.addColorStop(0.8, 'rgba(250, 200, 50, 0)'); ctx.beginPath(); ctx.fillStyle = light; ctx.arc(this.x, this.y, strength, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); } this.remove = function(index, array) { array.splice(index, 1); } } function Spark(options) { options = options || {}; this.x = options.x || w * 0.5; this.y = options.y || h * 0.5; this.v = options.v || { direct: Math.random() * Math.PI * 2, weight: Math.random() * 14 + 2, friction: 0.88 }; this.a = options.a || { change: Math.random() * 0.4 - 0.2, min: this.v.direct - Math.PI * 0.4, max: this.v.direct + Math.PI * 0.4 }; this.g = options.g || { direct: Math.PI * 0.5 + (Math.random() * 0.4 - 0.2), weight: Math.random() * 0.25 + 0.25 }; this.width = options.width || Math.random() * 3; this.lifespan = options.lifespan || Math.round(Math.random() * 20 + 40); this.maxlife = this.lifespan; this.color = options.color || '#feca32'; this.prev = { x: this.x, y: this.y }; this.update = function(index, array) { this.prev = { x: this.x, y: this.y }; this.x += Math.cos(this.v.direct) * this.v.weight; this.x += Math.cos(this.g.direct) * this.g.weight; this.y += Math.sin(this.v.direct) * this.v.weight; this.y += Math.sin(this.g.direct) * this.g.weight; this.v.weight > 0.2 && (this.v.weight *= this.v.friction); this.v.direct += this.a.change; (this.v.direct > this.a.max || this.v.direct < this.a.min) && (this.a.change *= -1); this.lifespan > 0 && this.lifespan--; this.lifespan <= 0 && this.remove(index, array); } this.render = function(ctx) { if (this.lifespan <= 0) return; ctx.beginPath(); ctx.globalAlpha = this.lifespan / this.maxlife; ctx.strokeStyle = this.color; ctx.lineWidth = this.width; ctx.moveTo(this.x, this.y); ctx.lineTo(this.prev.x, this.prev.y); ctx.stroke(); ctx.closePath(); } this.remove = function(index, array) { array.splice(index, 1); } } function Particles(options) { options = options || {}; this.max = options.max || Math.round(Math.random() * 10 + 10); this.sparks = [...new Array(this.max)].map(() => new Spark(options)); this.update = function() { this.sparks.forEach((s, i) => s.update(i, this.sparks)); } this.render = function(ctx) { this.sparks.forEach(s => s.render(ctx)); } } function Text(options) { options = options || {}; const pool = document.createElement('canvas'); const buffer = pool.getContext('2d'); pool.width = w; buffer.fillStyle = '#000000'; buffer.fillRect(0, 0, pool.width, pool.height); this.size = options.size || 100; this.copy = (options.copy || `Hello!`) + ' '; this.color = options.color || '#cd96fe'; this.delay = options.delay || 5; this.basedelay = this.delay; buffer.font = `${this.size}px Comic Sans MS`; this.bound = buffer.measureText(this.copy); this.bound.height = this.size * 1.5; this.x = options.x || w * 0.5 - this.bound.width * 0.5; this.y = options.y || h * 0.5 - this.size * 0.5; buffer.strokeStyle = this.color; buffer.strokeText(this.copy, 0, this.bound.height * 0.8); this.data = buffer.getImageData(0, 0, this.bound.width, this.bound.height); this.index = 0; this.update = function() { if (this.index >= this.bound.width) { this.index = 0; return; } const data = this.data.data; for (let i = this.index * 4; i < data.length; i += (4 * this.data.width)) { const bitmap = data[i] + data[i + 1] + data[i + 2] + data[i + 3]; if (bitmap > 255 && Math.random() > 0.96) { const x = this.x + this.index; const y = this.y + (i / this.bound.width / 4); thunder.push(new Thunder({ x: x, y: y })); Math.random() > 0.5 && particles.push(new Particles({ x: x, y: y })); } } if (this.delay-- < 0) { this.index++; this.delay += this.basedelay; } } this.render = function(ctx) { ctx.putImageData(this.data, this.x, this.y, 0, 0, this.index, this.bound.height); } } function loop() { update(); render(); requestAnimationFrame(loop); } function update() { text.update(); thunder.forEach((l, i) => l.update(i, thunder)); particles.forEach(p => p.update()); } function render() { ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1; ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, w, h); // ctx.globalCompositeOperation = 'screen'; text.render(ctx); thunder.forEach(l => l.render(ctx)); particles.forEach(p => p.render(ctx)); } (function () { // canvas = document.getElementById('canvas'); input = document.getElementById('input'); ctx = canvas.getContext('2d'); w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; thunder = []; particles = []; // text = new Text({ copy: 'www.niannz.com' }); canvas.addEventListener('click', (e) => { const x = e.clientX; const y = e.clientY; thunder.push(new Thunder({ x: x, y: y })); particles.push(new Particles({ x: x, y: y })); }); let cb = 0; input.addEventListener('keyup', (e) => { clearTimeout(cb); cb = setTimeout(() => { text = new Text({ copy: input.value }); }, 300); }); // loop(); })() </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p></p> <p></p> </div> </body> </html>

赞(5) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 BY-NC-SA 进行授权
文章名称:《HTML闪电绘制文字动画特效附源码,要的来下载
文章链接:https://www.niannz.com/1871.html
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
分享到: 更多 (0)

说两句 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)

当前页面在线人数:1 人

访客刷新页面后重新计时!

在线列表:

100.25.42.211 => 剩余失效时间: 600 秒

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

                                                                                                                                                                                                                                                                                                                                                                                                                                                  🌙
×
订阅图标按钮
_.._ ,------------. ,' `. ( 偷代码 死全家 ) / __) __` \ `-,----------' ( (`-`(-') ) _.-' /) \ = / ( /' |--' . \ ( ,---| `-.)__` )( `-.,--' _`-. '/,' ( 你", (_ , `/,-' ) `.__, : `-'/ /`--' | `--' | ` `-._ / \ ( /\ . \. 艹 your mother / |` \ ,-\ / \| .) / \ ( ,'|\ ,' : | \,`.`--"/ } `,' \ |,' / / "-._ `-/ | "-. "-.,'| ; / _/ ["---'""] : / |"- ' ' | / ` | //////////////////////////////////////////////////////////////////// // // // 系统已记录你的IP - 偷代码死全家 // // 版权所有:https://www.niannz.com // // 官方QQ群:580092872 // // // //////////////////////////////////////////////////////////////////// 感谢您的访问,如需了解 念楠竹网站 各部分功能及源代码,欢迎联系站长QQ87316319交流。 __ __ /%%\ ^ /%%\ ^ /%%%%\ *-* /%%%%\ ^ /%%%%%%\______|____________/%%%%%%\ |""""|%%%/^\%%%/^\%%%/^\%%%|""""| ^ | H |%%%|H|%%%|H|%%%|H|%%%| H | ^ | |¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾¾| | | | HHH HHH HHH | | ()) ______| |_____________________| |_____ () (()/%/^\%%| |%%%%%%%%%%%%%%%%%%%%%| |%%/^\%\(() -----皇宫镇守---永无BUG-------- ()/%%|H|%%| |%%%%%%%%%%%%%%%%%%%%%| |%%|H|%%\() )/%%%%%%%%| | ___ _/-o-\_ ___ | |%%%%%%%%\( ()| HH HH | | HHH | | | HHH | | HH HH |() |||_______|____|__HHH___|_|_|___HHH__|____|_______||| _________________________ _________________________ | | -------念楠竹网站www.niannz.com-----------优质工具导航栏www.4hhh.cn------- ..---..._ ..--"" "-. ..-""" ". ..-"" " .-" .-" ... -_ .=" _..-" F .-"-.....___-.. "L_ _-' ." j" .-": /"-._ "- " : ." j" : : |"" ". ......---------"""""""""""-:_ | |\ ...---"""" -. f | " ...---"" . ..----"""""""".. ".-... f ". ..---""" ..---""""""""-..--"""""""""^^:: |. "-. . .--" .mm::::::::::::::::::::::::::... ""L |x ". -" mm;;;;;;;;;;XXXXXXXXXXXXX:::::::::::.. | |x. - xF -._ .mF;;;;;;XXXXXXXXXXXXXXXXXXXXXXXXXX:::::::| |X:. " j | j;;;;;XXX#############################::::::| XX:::: | |.#;::XXX##################################::::| |XX::: | j#::XXX#######################################:: XXX:: | .#:XXX########################################### |XX:: | #XXX##############################XX############Fl XXX: | .XXX###################XX#######X##XXX###########Fl lXX: | #XX##################XXX######XXXXXXX###########F j lXXX | #X#########X#X#####XXX#######XXXXXX#######XXX##F jl XXXX | #X#######XX#" V###XX#' ####XXXXXX##F"T##XXXXXX. V / . .#XXXX | #########" V#XX#' "####XXXX##.---.##XXXXXX. / / / .##XXXX | "######X' .--"" "V##L #####XXX#" "###XXXX. ." / / .###XXXX | #####X " .m###m##L ####XX# m###m"###XX# / / .#####XXX | "###X .mF"" "y ##### mX" "Y#"^####X / .######XXX | "T# #" # #### X" "F""###XX"###########XX | L d" dXX xm "^##L mx dXX YL-"##XX"S""########## | xL J Xd% T "" T XdX L. "##XS.f |######### | BL X## X X## X T#SS" |######### | #L X%##X X%##X| j#SSS /########## | #L ._ TXXX-" "-._ XXXF.- ###SS\########### | ## """"" """""" ##DS.\########### | TF ##BBS.T#########F | #L --- ###BBS.T########' | '## "" jL|###BSSS.T####### | '#### ______ .:#|##WWBBBSS.T####F J L '######. \___/ _c::#|###WWWBSSS|#### J ;; '########m \_/ c:::'#|###WWWBBSS.T##" J ;;;L :########.:m. _ _cf:::'.L|####WWWWSSS|#" .J ;;;;B ########B....:m.. _,c%%%:::'...L####WWWBBSSj x ;;;;dB #######BB.......##m...___..cc%%%%%::::'....|#####WWBBDS.| " ;;;;;ABB# #######BB........##j%%%%%%%%%%%%%%:::'..... #####WWWWDDS| .;;;;;dBBB# #######BB.........%%%%%%%%%%%%%%%:::'... j####WWWWWBDF ;;;;;BBB#### ######BBB.........%%%%%%%%%%%%%%:::'.. #####WWWWWWS ;;;;dBBB#### ######BBB..........^%%%%%%%%%%:::" #####WWWWWWB ;;;:BBB###### X#####BBB"..........."^YYYYY::" #####WWWWWWW ;;.BB######### X######BBB........:'' #####WWWWWWW ;;BB##########L X######BBB.......mmmm.. ..x#####WWWWWWB. ;dBB########### X#######BB..... "-._ x"" #####WWWWWWBL ;BBB###########L X######BB... "- ######WWWWBBBL BBB#############. ######BBB. #####WWWWBBBB BBB############## X#####BBB #####WWWWWBBB BBB############### T#####BB #####WWWBBB : BB################# T###BBP #####WWBB" .# BB##################..W##P ###BBB" .## BB###################..l "WW" ### BB####################j ___ " l j### BBB##################J_- """-.. ':::' .-""""""""""-. l .#### BBB######B##########J######## "-. ::' -" ..mmm####mm.."-.< ##### MCL-5/7/88 BBB#####J############ "-_ :| " .###############mmLlR#### BBBBBBBBBBBBBBB###/ ####### -. .:| ".#####F^^^P^^"""^^^Y#lT#### BBBBBBBBBBBBBBBBBj|####mm ######xx-...:::|" ###f ..... "#T### BBBBBBBBBBBBBBBBjj##########mm.. ":::."j##F .mm#########mmm.. Yj### BBBBBBBBBBBBBBBB|^WWWSRR############mmmmm xx """mjF.mm####################j### BBBBBBBBBBBBBBBB| ######mmmmmm#######################j### BBBBBBBBBBBBBBBBY#m... ..mmm##########PPPPP#####m.. lj### BBBBBBBBBBBBBBBBB2##############^^"" ..umF^^^Tx ^##mmmm........mmmmmmlj### BBBBBBBBBBBBBBBBBJT######^^^"" .mm##PPPF"...."m. "^^###############lj#### BBBBBBBBBBBBBBBBB##^L .mmm###PPP............"m.. """"^^^^^"" lj#### BBBBBBBBBBBBBBBB#####Y#mmx#########P.................."^:muuuummmmmm###^.##### BBBBBBBBBBBBBBBB#####::Y##mPPPPF^".......|.............. ""^^######^^"...##### BBBBBBBBBBBBBB########..................F............ \ ........##### BBBBBBBBBBBBB#########.................|.......... : ....l##### BBBBBBBBBBBB###########...............F......... \ ..###### BBBBBBBBBBB#############.............|........ : dA#### BBBBBBBBBB##############..................... kM#### BBBBBBBBB################.................. k##### BBBBBBB##################................ k##### BBBBB#####################............. t##### BB########################............ "E#### B########################F............ . "#### #########################............' | .. "L## ########################F............ ... "L# #######################F............' ..... "# ######################F............. ....... " #####################$.............. ......... #####################lmmm............. ........... ..m# ####################j########mmmm............. ......mmmmmm######## ###################j###::::;:::::########mmmmmmm############################## ##################j:::::::;:::::::;;::##############################^^^"""" ##################.mm:::mmm######mmmm:::' ^^^^^^""#######^^"""" #################F...^m::;::################mmm .mm""" #################.......m;::::::::::::#########^" ################F.........###mmm::::;' .##^""" ##############F...........:#######m.m#" ############..............':#### #########F............mm^"" #######..........m^"" ####.......%^" #.....x" |.x"" .-" .- .- .- - -" -" " x xx xx xxx" xxx" .xxxx" ___xxx"" .xxxx""....F """"mmxxxxx ___xxx^^^..........' .xx^^^^YYYY###xxx^^.................| .xx^" #######x..................| .xx" ###########mx..............f .x^ ##############xx............| j" ############## x..........; .........# ############ #x.........| x.......j" ########## ####x.......f xxx....#.. ######## #######x......| xxxx.#.... ####### ##########x.....| xxx...... ##### ######### x....| xxx...... ### ####### #m...| xxx...... ## ###### ####..| xxx......#. ##### ######m| xxxx....... ### #######Fx xxx...... # j##### m xx...... #### Jxm xxx...... #### j###Km xxx..... ### j####F m xx...... # ###F .m xxx .... j##F .###m m..xx..... ##F j#####K^mm. m...xx...... ## #####F ####mm m .....x...... F j####F ######## m ......x..... ###F J########## "m ........x.... .#F #########^^| "......mmF^^^x.... ## ###### | lL..jF x.... .F #### | lTLJF x.... #### | l::|. ".... j### ## l.... L.... ###F x## l.... ..m##L... ##F j### l:... #####L... #F j#### l.... #### ... ##### ".... ... ####F | l.... ... j###F | #... .... ###F | "#.. .jL.... ##F | ##. .m###L....#F | "## ..mm###### .... | | |... | k |... | l |... k k .m#L... Jk ## ..mm####L... k ### d########' L.... | l | "-.__-" l | l j# : j## k j##' l .m###k l ###^^"| | | j .## | ###### |== ##### #### .k #####" #### l #####^ #### l ### ####' ! m###F | ###### | mm##m###' |. m########F |. m#######F" # d. ### # |.. .' |.. | k.. : \... F |... #d |... ### L... ####. |... j### | L... ### | T... j## k \... ## | \... . "^-____- ------- ----美女保佑 早日摆脱单身狗