ancha7106-优快云博客

转载如何制作一款在线编译器

在文章开始之前先展示一下我自己做的在线编译器 JS-Encoder: 点此预览大概三四个月之前我开始有了制作在线编译器的想法，在此之前我接触过很多的在线编译器，如CodePen、JsBin、JsFiddle等，这些都非常优秀且有着庞大的用户群体的编译器。我一直对在线编译器的实现抱有浓厚兴趣，这些在线编译器支持很多种语言，代码变色，诸多的快捷键以及一些个性化设置，这使得在线编译器看上...

2019-07-22 08:49:00 1076

转载 SVG波浪动画

今天来试试用svg+css3制作波浪动画下图是我制作出的效果还不错吧在制作波浪前，首先我们要画波浪啊，至于画波浪，如果你想直接通过计算贝塞尔曲线绘制出波浪。。。好吧，那我也不拦着你我就直接用ai的钢笔工具画了为了画出一模一样的曲线可是花了我不少功夫但是光滑曲线还是不行的，必须要画出一个以曲线为顶的“矩形” 像这样：本人画工不敢恭维，凑合着...

2018-09-17 12:06:00 640

转载 svg文字描边动画

svg动画在网页中是经常见到的，svg动画使得网页看起来清新美观任何不规则图形都可以由svg绘制完成，当然也包括文字，文字本身就可以看作一个不规则图形???? 还是按以前的流程，开始放代码前，先看效果：很酷炫有木有？！！！在我发现这个效果的时候，我觉得碉堡了，直到我知道了它的代码代码真的很简单，很简单。。。咳咳。不扯了，现在进入正题在使用网页做svg动画的时候...

2018-09-15 13:54:00 509

转载 canvas制作表单验证码

canvas是个非常强大的组件，网页上的验证码一般都是用服务器语言制作出来的 canvas同样是可以实现这个功能的下面请观看效果图: 步骤呢其实也很简单 HTML部分： 1 <form action="" id="form" method="post" onsubmit="check()"> 2 <label for="c...

2018-09-10 19:05:00 272

转载 canvas粒子线条效果

在正式开始之前，先上个效果图看看：很酷炫有木有？？？那么如何实现这个效果呢？首先，我做这个特效的基本步骤是这样的： 1.将若干个粒子随机分布在画布（canvas）上，并且给他们一个初始速度 2.为了不让粒子离开画布的可视范围，当粒子移动到画布边缘时，会进行反弹 3.设定一个最大距离，若粒子间的距离超过最大距离，便不会产生连线，若小于等于最大距离，则粒子间距越小...

2018-09-05 14:14:00 560

转载 canvas动画：气泡上升效果

HTML5中的canvas真是个很强大的东西呢！这几天突发奇想想做一个气泡上升的动画，经过许久的思考和多次失败，终于做出了如下效果由于是录制的gif图，看着会有点卡顿，实际演示是很自然的想要做出这种效果需要用到大量的随机数先上代码： CSS+HTML <!DOCTYPE html> <html lang="en"> <h...

2018-07-24 12:14:00 1548

转载用canvas绘制时钟

用canvas做时钟其实很简单，下面是我做出的效果：是不是还挺漂亮的？下面上代码： html <div class="whole"> <canvas id="canvas" width="450" height="450"></canvas> <canvas id="canvas1" width="3...

2018-07-21 18:59:00 270

转载二级导航栏

二级导航栏可以说是非常好做了(●'◡'●) html <div class="whole"> <ul> <li class="li">1 <ul class="list"> <li>1</li> <li>2</...

2018-07-20 17:41:00 201

转载层叠轮播图的简易制作

　　之前做过很多不同样式的轮播图，不是通过改变left值使图片左右移动的，就是改变透明度实现轮播图的，偶然在网易云上看到了层叠轮播图，它转换图片的方式和其他轮播图有些不同，我从来没做过这种轮播图，思考了很久该用什么方法做，终于做出来了一个简陋的成品。由于轮播图的图片是网上找来的，所以我做了模糊处理，用清晰的图片效果更好，这里是我的一个演示（没有录制鼠标）：思路和方法...

2018-07-19 22:48:00 686

转载 canvas的width和height设置问题

最近在学习canvas属性中遇到一个小问题，就是canvas的width和height设置问题代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document&l...

2018-05-26 11:25:00 4242

转载运用KeyCode在浏览器中按WASD使图形运动

如何实现在浏览器中按WASD四个键使图形上下左右运动呢？其实很简单，用keyCode方法就可以实现了。先放个div在html中： 1 <div id="ball" style="left: 0px;top: 0px"></div> 在div中设置内联css样式，至于为什么要设置内联式，之后在解释。 css部分： 1 <style&...

2018-05-05 16:57:00 517

转载 JavaScript正则表达式

正则表达式在程序应用中的使用是非常广泛的。首先正则表达式一般要写两个斜杠之间：/正则表达式/ 其次有两个符号 ^ 和 $ ，符号 ^ 代表一个字符串的开始，而$ 则代表一个字符串的结束。举个例子： 1 <script> 2 var str='asdfghjkl'; 3 var select=/^asd/; 4 </...

2018-04-25 20:43:00 134

转载 HTML DOM

上图是HTML DOM树由图可知节点有三种：元素节点，属性节点，文本节点。这三种节点可以用element.nodeType来表示，如果是元素节点则返回值为1，属性节点返回2，文本节点返回3。 1 <script> 2 function Fun(){ 3 var Op=document.getElementById('p1'); 4 alert(Op.nod...

2018-04-07 19:43:00 117

ancha7106的博客