jquery实现文字滴血动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现文字滴血动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap'); body, html { filter: blur(1px) contrast(1.6); background: black; height: 100%; width: 100%; overflow: hidden; } div { font-size: 80px; font-family: 'Concert One', cursive; color: red; position: absolute; z-index: 1; filter: url(#noise); white-space: nowrap; } svg { display: none; } canvas { border-bottom: 5px solid red; filter: url(#noise); } </style> </head> <body> <!-- partial:index.partial.html --> <div>I'm a bloody div</div> <svg> <filter id="noise"> <feTurbulence baseFrequency="0.07" type="fractalNoise" result="turbNoise" /> <feDisplacementMap in="SourceGraphic" in2="turbNoise" xChannelSelector="G" yChannelSelector="B" scale="4" result="disp"/> </filter> </svg> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script><script > $(function(){ var h = 200, w = 600; var ctx = $('<canvas>').get(0).getContext('2d'); $('body').append(ctx.canvas); ctx.canv.........完整代码请登录后点击上方下载按钮下载查看
网友评论0