Fork me on GitHub

JackLin的博客

当前位置:首页 > 分类

SpringBoot 10 JavaWeb 2 Android 0 源码分析 1 Thymeleaf 1 MyBatis 0 SSM 1 翻译 0 数据库设计 9 Gradle 1 Test 1 Tomcat 1 前端设计 2 ElasticSearch 2 阿里巴巴 9 Redis 3 Docker 1 实验报告 1 SpringCloud相关 1 生活 1

网页背景动态线条跟随鼠标焦点效果

  • 2020-05-16
  • 141
  • 前端设计
发现很多网站的背景都有一个类似的动态效果,就是网站的背景中有很多动态的线条,当鼠标移动过去时,线条会吸附在鼠标的焦点上。 效果图如下所示: ![](http://image.linkaiblog.top/背景线条_2020051608512951SS.png) 然后上网搜了一下,发现了 1 种解决方案 ### 解决方案1:github上的开源项目 我在 github 找到了一个类似的开源项目。 项目地址:https://github.com/hustcc/canvas-nest.js 这个项目有中文 ReadMe 文档,十分友好,而写文档也写的十分详细。 ![](http://image.linkaiblog.top/背景线条_2020051608474847SS.png) 由于我们只是简单的使用,所以只需要引入 dist 目录下面的 canvas-nest.js 文件即可。 效果就是我文章开头的截图所示的效果 **同时,如果觉得不错的话,记得给该项目点个 star 哟!** ![](http://image.linkaiblog.top/背景线条_2020051608365436SS.png)

CSS实用技巧

  • 2020-04-14
  • 131
  • 前端设计
### 概述 这篇文章主要记录一些使用的前端 css 技巧,知识点可能很零散,但都是一些实用的技巧。一直更新中... #### 1.让div的高度随着内容的高度改变而改变 ``` div { border: 1px solid #dee2e6 !important; } // 同样也可适用于表格中的 td,th ``` #### 2.让div水平排列 #####(1)设置浮动 float:left ``` div { float:left } ``` #####(2)设置 display:inline-block ``` div { display: inline-block } ```