背景
这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图：
动态边框
思路
看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了…
就在我绞尽脑汁的时候，灵光乍现，为什么不尝试一下用CSS3多背景来模拟边框呢，背景是可以设置长度的，通过修改背景的长度，就可以实现要求的动效。说干就干，赶快从网上搜索一下CSS3背景的相关知识。
CSS3 Backgro
2022-04-04 00:05:39
85KB
1
我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。
在这里我们不得不克服几个问题：
如何定义html如何悬停定位菜单元素
在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。
下面就让我们开始今天的教程吧
第一步：构建HTML
在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：
每个顶部的矩形框都与下面大圆中的一个小圆相联系，当把鼠标悬停在矩形框上时，对应的小圆旋转到菜单的顶部。而实现这个功能的难点就是怎样实现悬停在一个元素上从而影响另一个元素的表现状态。
为解决这个问题，让我们看看下面的H
2022-02-24 22:45:11
349KB
1
代码少，功能齐全，支持滑动和点击触发 支持滑动消失 点击消失，滑动和点击可以分开使用，也可以一起使用，自己写的，要用的自己拿去
2021-12-13 18:07:22
4KB
1
MusicPlay
纯css,js 前端音乐播放器,界面UI比较好我特别喜欢,适合二次开发,调用了网易云第三方接口以及将歌曲链接导出可以访问的歌曲链接,实现了异步歌曲搜索播放,以及异步显示歌词等.结合html5 新特性实现歌曲暂停,下一首,快进等等.为大二前端练手项目.
采用渐变质背景
异步搜索歌曲链接并添加播放（原生态js异步调用网易云根据关键字匹配歌曲链接的接口）目前该接口因版权部分歌曲链接失效
网易云音乐接口：
如曹操这首歌的链接为
返回的json 数据格式如下：
参数
var data = {
"type": 1,//单曲
"limit": 1,//返回数量1
"s": value,//搜索词
"callback": "jsonpcallback"
};
搜索歌曲实现播放关键代码
searchBtn.addEventListener('click', function () {
2021-11-30 20:57:34
1.68MB
1
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式
2021-11-13 19:35:01
253KB
1