在2014年的双11即将来临之季，爱编程小编为大家整理10款纯css3实现的按钮。希望这对坚守在前端的码农们有所帮助。亲，如果你有好的资源也可在本文留言，让从事编码的程序员们抱团。工作更轻松。No1.一款基于css3非常实用的鼠标悬停特效这款特效，当鼠标经过时候一个半透明的遮罩层倒下来。效果很好，而且是纯css3实现的...

今天给大家带来一款基于css3非常实用的鼠标悬停特效。这款特效，当鼠标经过时候一个半透明的遮罩层倒下来。效果很好，而且是纯css3实现的，代码很少，非常实用。效果如下：在线预览   源码下载实现的代码：html代码：<divalign="center"color:rgba(128,0...

今天要给大家分享一款基于jquery的手风琴图片展示效果。这款图片的展示效果鼠标经过前是灰色的，当鼠标经过时图片变大且变为彩色。效果图如下：在线预览   源码下载实现的代码。html代码：<divclass="page-container"><divclass="flex...

今天给大家分享一款纯css实现的垂直时间线效果。垂直时间线适合放在类似任务时间安排的网页上。该实现采用了蓝色作为主题色，界面效果还不错。一起看下效果图：在线预览   源码下载实现的代码。html代码：<divclass="container"><headerclass="...

今天要给大家介绍一款纯css3实现的机器人看书动画效果。整个画面完全由css3实现的绘制，没有使用任何图片元素。机器人的眼睛使用了动画元素。我们一起看下效果图：在线预览   源码下载实现的代码。html代码：<divclass='szene'><divclass='ima...

之前为大家介绍了一款 html5canvas实现图片玻璃碎片特效。今天要给大家带来一款基于javascript的3D玻璃破碎特效。效果图如下：在线预览   源码下载html代码：<divid="container"><divid="fragment">&l...

之前我们有分享过很多jQuery手风琴样式的菜单，比如CSS3手风琴下拉菜单。今天要分享的jQuery手风琴效果很特别，它是手风琴样式的相册图片展开效果。我们只需点击图片缩略图即可展开当前的图片，并将其他的图片收缩起来。在线预览   源码下载实现的代码html代码：<articlei...

今天为给大家带来一款javascript实现的超炫的下拉选择框。下拉的列表由半用透明的幽灵按钮组成。显示下拉的时候，列表项由左右两侧飞入。消息时飞向左右两侧。一起看下效果图在线预览   源码下载实现的代码。html代码：<divclass="scifiUI"><h1>...

今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox。这款图片查看插件体验很好，不仅有左右两个小箭头可以浏览上一张和下一张图片，还支持鼠标的左右键浏览上一张和下一张图片。有点类似google图片的查看器。一起看下效果图： 在线预览   源码下载 我们一...

昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图： 在线预览   源码下载 实现html代码:<divclass="frame">&...

随着html5和css3的诞生。各种非常酷、非常炫的网页焦点图在各个前端技术网上满天飞。基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持。这让需兼容ie6到ie8的页面又爱又恨。下面为大家介绍一款完全基于juery的焦点图，而且这款插件完美支持ie6，多种百叶窗切换，效果还是相当赏目的。无图无真相...

获取一个页面各个标签的数量document.getElementsByTagName('*')--获取所有的标签。varobj=document.getElementsByTagName('*');varlen=obj.length;vartagNameObj={};for(vari=0;i<len;i++){i...

<template><divclass="select-time-wrapper"><h5class="titie">选择自提时间</h5><divclass="select-time-contentflex"><ulclass="days">&l...

1、中文：[u4e00-u9fa5]2、英文字母：[a-zA-Z]3、数字：[0-9]4、英文，数字，下划线：[a-zA-Z0-9_]或者 ^w+$5、英文，数字，下划线，判断长度：[a-zA-Z0-9_]{4,10}6、只含有汉字、数字、字母、下划线不能以下划线开头和结尾： ^(?!_)(?!.*...

<divclass="coupon-exchangeclearfix"><divclass="code-input"><inputtype="text"placeholder="请输入兑换码"class="input"id="couponExchangeInput"/><icl...