Web前端设计资源

网页添加实时显示FPS帧率
通过一下面的代码,可以让网页实时显示FPS帧率。 <script> jQuery(document).ready(function($){ $('body').before('<di...

CSS把文字限制在圆形内
在圆形容器中显示文本的写法 <!DOCTYPE html> <html> <head> <title>CSS把文字限制在圆形内</title>...

几个不太常用的CSS选择器
收集一些不常用,但却非常有用的CSS选择器。 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中,例如下面...

前端代码编辑器
通过本文的方法可以将带有语法高亮的编辑器嵌入您的网站,将下面代码添加到网站模板适当位置即可。 <h3 class="question">Write a Program to calcula...

文字大小为什么要用html {font-size: 62.5%;}
移动端开发需要考虑不同手机上不同分辨率的展示效果,所以需要自适应解决方案。通用的方案是使用rem,rem是 root-em 的缩写,是根相对单位,其相对的是html的 font-size 的单位。 h...

flex: 1的写法
代码示例: <div class="container"> <div class="div">我是一个div</div> <div class="div"&g...

jQuery 水面涟漪插件 jquery.ripples
项目地址:https://github.com/sirxemic/jquery.ripples

jQuery 鼠标点击水波纹特效
<script type="text/javascript"> jQuery(document).click(function(e) { var size = 100//自定义大小 jQu...

纯真IP数据库的解析与读取
纯真IP库是民间自发收集、提交、聚合而来的数据库,囊括了国内外的大量IP数据。它的官网提供了记录提交和纠错的功能,管理员在统一整合后每5天更新一次。纯真IP库是完全免费的,它的官网上有在线查询功能,同...

CSS文字加粗不影响整体宽度
通过伪元素处理文字加粗造成整体宽度改变 <html> <head> <title>CSS文字加粗不影响宽度</title> <style type...

@media和@media screen和@media only screen用法、做用、区别
网页宽度小于1200象素生效 @media (max-width:1200px){} 屏幕宽度小于1200象素生效 @mdia screen and(max-width:1200px){} 仅屏幕最大...

CSS3 水平垂直居中
当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。 translate()是css3的新特性,在不知道自身宽高的情况下,可以...

animation动画复合属性
css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...

CSS 六边形
1、将六边形拆分为一个矩形+二个三角形,利用伪元素after和before来实现; <!--第一种方案:矩形+左右两个三角形来实现--> <div class="one">&l...

网页特效live2d看板娘
如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 将下面代码添加到网页适当位置即可。 <script src="https:...