动态小球线条canvas

最新推荐文章于 2020-01-29 19:05:16 发布

置顶

ChicUniqueKing

最新推荐文章于 2020-01-29 19:05:16 发布

阅读量135

点赞数

分类专栏： js以及自定义jquery插件

本文链接：https://blog.csdn.net/weixin_42603985/article/details/94449559

版权

本文展示了一个使用HTML5 Canvas实现的动态小球线条效果的代码实例。通过JavaScript绘制多个小球并让它们在画布上移动，当小球靠近时会用线条连接，创建出流动的线条视觉效果。此效果适用于网页背景动画或者互动元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <title>activeline</title>
       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
       <script src="layer.js"></script>
       <style type="text/css">

           *{
               margin: 0;
               padding:0;
           }
           html{
               width:100%;
               height:100%;
           }

           body{
               width:100%;
               height:100%;
               position: relative;
               background-color: #000;
               overflow: hidden;
               color:#fff;
           }
           .log_con{
               width:400px;
               height:400px;
           }
           .input-text{
               width:300px;
               height:30px;
               line-height: 30px;
               border:1px solid #ddd;
               border-radius:5px;
               font-size: 14px;
               color:#fff;
               background: #6b451e;
               padding-left: 20px;
               margin-left:30px;


           }

           p{
               margin-top:30px;
           }
           /*.input-text:hover{
               border:1px solid #4527db;
           }*/
           .btn{
               width:132px;
               height:30px;
               margin-left: 50px;
               background: #683b0b;
               border:1px solid #683b0b;
               border-radius:6px;
               color:#fff;

           }
           .lg{
               width:400px;
               height:300px;
               position: relative;
               margin:0 auto;
               overflow: hidden;
               border-radius:12px;
               background: rgba(234, 234, 234, 0.21);
               /*border:1px solid #ccc;*/

           }
           .lg_t{
               width:100%;
               height:30px;
               padding-top:10px;
               background: #683b0b;
           }
           .lg_c{
               width:868px;
               height:280px;
               opacity: 1

最低0.47元/天解锁文章

ChicUniqueKing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态小球线条canvas

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,...
复制链接

扫一扫