HTML5/CSS3共113篇 第3页
排序
:valid | CSS属性参考
CSS :valid伪类选择器用于匹配指定类型的取值有效的<input>元素。 例如一个email输入框元素（<input type='email'>），如果这个输入框中的值为有效的email地址，那么它就可以被:va...
好看的CSS3 加载页面动画效果 loading效果
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='content-type' content='text/html; charset=UTF-8'> <meta name='viewport' cont...
radial-gradient() | CSS属性参考
CSS radial-gradient()函数用来创建一个径向渐变。一个渐变数据类型<gradient>实际上是一张图片，它由两种或更多的颜色通过平滑渐进过渡形成。 径向渐变是指从起点到终点颜色从内到外进...
rgb() | CSS属性参考
CSS rgb()函数使用红绿蓝（RGB）模式来定义颜色。 任何其它颜色都可以通过红绿蓝三种颜色的混合来得到。rgb()函数的参数可以是3个0-255之间的整数，或0-100%之间的百分比数。例如：rgb(255,0,0...
rotate() | CSS属性参考
CSS rotate()函数用于在二维空间中旋转一个元素。 rotate()函数的语法如下： transform: rotate(<angle>); 元素旋转的角度由rotate()函数的参数来决定，它是一个<angle>值。元...
rgba() | CSS属性参考
CSS rgba()函数扩展了RGB颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。 在CSS中，颜色也可以使用rgba()函数来表示。rgba()颜色扩展了RGB颜色模式，它包含了阿尔法通道，允许设定...
CSS属性参考 | word-wrap
CSS word-wrap 属性用于指定当一个较长的字符串到达其父容器的边界时，为了防止字符串溢出容器之外，浏览器是否允许在这样的字符串中间进行断行。 word-wrap属性原本属于微软的一个私有属性，...
使用CSS3制作故障（Glitch）动画效果
什么是故障（Glitch）动画效果？你是否见过电视机或显示器发生故障时画面的抖动效果，那就是故障动画效果。来看下面的一个例子（将鼠标放在下面的文字上看看效果）： Glitch 制作Glitch故...
layui2.5 开关在confirm确认了之后在关/开
<!--默认选中--> <div class='layui-form-item layui-form'> <div class='layui-input-block'> <input lay-filter='used' type='checkbox' value='1' name=...
好看的横向水平时间轴 纯 html + css
HTML代码： <div class='toggle'> <span>☀️</span> <input type='checkbox' id='toggle-switch' /> <label for='toggle-switch'></label> ...
skew() | CSS属性参考
CSS skew()函数用于在二维空间中对一个元素进行倾斜。 skew()函数的语法如下： transform: skew(<angle> [, <angle>]?); skew()函数用于倾斜一个元素。它接收两个<angle>...
:visited | CSS属性参考
CSS :visited伪类用于选择页面中被访问过的超链接元素，并为这些超链接设置样式。 使用:visited伪类时需要特别注意，只有带有href属性的超链接<a>元素才会被:visited伪类匹配。例如： ...
:focus | CSS属性参考
CSS :focus伪类选择器用于匹配当前获取焦点的元素，这个元素通常是表单元素，通过键盘tab键或用户鼠标点击使其获取焦点。 <input>、<button>和<textarea>等表单元素可以通过...
:not() | CSS属性参考
CSS :not()伪类选择器是一个反向选择器，它用于匹配不是:not()参数指定的某类元素。 :not()可以接收的参数包括以下的类型： 类型选择器 class类选择器 id选择器 伪类选择器 属性选...
translateX() | CSS属性参考
CSS translateX()函数用于在二维空间中沿X轴移动一个元素。 translateX()函数的语法如下： transform: translateX( tx ); translateX()函数用于将元素沿X轴方向移动。tx使用<length&g...
bootstrap框架下封装一个Alert弹出框
废话不说直接开始 新建 alert_box.js 文件 var commonUtil = { /** * 弹出消息框 * @param msg 消息内容 * @param type 消息框类型（参考bootstrap的alert） */ alert: function(msg, type){ i...
