aiyangchen8093-CSDN博客

转载【CSS3】纯CSS3制作页面切换效果

此前写的那个太复杂了，来点简单的核心<html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } ...

2019-05-30 10:58:00 230

转载【CSS3】分类豆腐块菜单浮动效果

HTML<html><head> <title></title> <style type="text/css"> #bg { width: 1270px; height: 751px; margin: 0 auto; background: url("imag...

2019-05-27 13:27:00 241

转载【CSS3】使用CSS3制作全屏切换效果

在线演示： DEMODEMO中及以下代码并没有写兼容代码，请使用高级浏览器打开，IE版本对CSS3支持并不太友好，IE11打开没有滚屏效果。兼容代码前缀：-webkit--moz--o--ms-直接上代码：<!DOCTYPE html><html lang="en"><head> ...

2017-06-09 09:38:00 109

转载【JQ】toggle / slideToggle / fadeToggle 的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQ</title> <style> div { width: 100px; height: 100px; backgrou...

2017-06-08 09:34:00 85

转载【CSS3 + 原生JS】上升的方块动态背景

GIF图有点大，网速慢的或将稍等片刻或可浏览本人的制作的demo。Demo : 点击查看HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Glunefish</t...

2017-05-25 11:41:00 161

转载【CSS3 + 原生JS】移动的标签

左图为本博客右侧截取的GIF图，右图为代码效果HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>SlideFont</title></head>...

2017-05-22 16:27:00 64

转载【原生JS】简单取随机数

因为js本身取随机数仅能取 0 到 1之间的数，所以.....取 1 - 10之间的随机数.function getSJS(x,y,z){ var int = null; while(int >= x || int <= y || int === null){ int = Math.random(...

2017-05-21 00:40:00 95

转载【原生JS】键盘事件

视频播放器音量调节效果。效果图：“我很丑！~可是我有音乐和啤酒！~”HTML：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>volume</title></head&...

2017-05-19 00:07:00 246

转载【CSS3】loading动画

HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loading</title></head><body> <div>...

2017-05-17 21:55:00 50

转载【原生JS】层叠轮播图

又是轮播？没错，换个样式玩轮播。HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>before</title></head><body> ...

2017-05-17 00:16:00 116

转载【CSS3】3D立方体动画

关于CSS3的3D立方体动画知识点：　　1、每个元素有独立的坐标系　　2、坐标系随当前元素的改变而发生改变　　3、立方体由静态transform参数构成　　4、通过给容器添加动画使立方体运动效果图：<!DOCTYPE html><html><head> <meta charset...

2017-05-14 00:42:00 94

转载【原生JS】图片预加载之有序预加载

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:0; padding:...

2017-05-12 14:52:00 99

转载【原生JS】图片预加载之无序预加载

图片预加载之无序预加载<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:...

2017-05-12 14:09:00 90

转载【CSS3】选择器

● 属性选择器E[att^ = "val"] // 选择E元素中以att属性值val开头的匹配元素E[att$ = "val"] // 选择E元素中以att属性值val结尾的匹配元素E[att* = "val"] // 选择E元素中以att属性值包含字符val的匹配元素 ● 根选择器：root 即选中html标签元素 ● 否定选择器div:not([id = "...

2017-04-21 15:46:00 83

转载【原生JS】自动渐变轮播

渐变主要是通过CSS3的动画实现。只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程。效果图：HTML:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

2017-04-17 11:15:00 79

转载【原生JS】制作网页头部刷新进度条

之前的某次番啬看到油管上有这么一个进度条，当时觉得挺好玩，一直想着做一个试试，刚才弄了一下写了一个不算太好看的简陋版本，哈哈。（本博客刷新会头部会出现，因为并没有真正的参与到浏览器加载是否完整这个渲染过程中来，所以只是一个表象，并不是说这个显示完了就浏览器也加载完了所以资源。）效果图：先看下html:就两个标签 <div id="ba...

2017-04-15 23:39:00 62

转载【CSS3】精美横向滚动菜单按钮

废话不多说，直接上图：然后是代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>精美横向滚动菜单按钮 - Glunefish</title> </head...

2017-04-14 09:58:00 111

转载【原生JS】滑动门效果

效果图：思路：通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现。HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>&l...

2017-04-13 20:09:00 72

转载【DCN】端口与地址绑定技术

端口与地址绑定技术与AM技术不同之处在于，AM端口下绑定的MAC或IP能够通信，不限制绑定的MAC在其它接口下通信。开启MAC-CPU学习模式mac-address-learning cpu-control静态Swithport port-security端口配置模式Switchport port-security ...

2017-04-13 00:38:00 444

转载【CSS3动画】下拉菜单模拟

下拉菜单模拟效果图：CSS3： <style> #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;} #box:hover{height:250px;} ...

2017-04-12 00:04:00 51

转载【原生JS】评论编辑器文本操作

效果图：HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="tex...

2017-04-10 15:37:00 73

转载【原生JS】进阶最后一个编程篇（与之前的选项卡不同的做法）

完成效果图：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">/* CSS样式制作 */ ...

2017-04-07 00:40:00 45

转载【原生JS】切换选项卡

效果图：HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" hr...

2017-04-03 19:33:00 64

转载【DCN】路由操作

offset */interface in/out access-list/prefix-list <1-16> // 修改路由偏移量RIP偏移列表network 192.168.1.0/24access-list 1 permit 192.168.1.0 0.0.0.255 //必...

2017-04-02 07:50:00 304

转载【原生JS】动态分页样式效果

效果图如下：html: <body> <div> <table id="btnbox"> <tbody> <tr><td> <a...

2017-04-01 20:10:00 177

转载【DCN】Wireless Intranet Captive Portal

Wireless IntranetCaptive Portal配置AAA服务Radius认证radius-server key 0 radiusradius-server authentication host 172.16.1.254 primaryaaa enableaaa group server radius radius_group...

2017-03-31 13:15:00 113

转载【原生JS】写最简单的图片轮播

非常简单的一个大图轮播，通过将控制显示位置来进行轮播效果，写来给正在学习的新手朋友们参考交流。先看效果：（实际效果没有这么快）先看布局：<div id="display"> // 显示容器<div id="tp" style="left:0px"> // 图片容器一定要加left<img src="img/lun...

2017-03-30 15:38:00 95

aiyangchen8093的博客