前端资源网-html5实例-css3实例-jquery实例-爱编程

纯CSS3全屏单页4格网格布局

这是一款非常实用的纯CSS3全屏单页4格网格布局。该布局将整个屏幕平分为4个网格，每个网格是一个项目内容。当点击了相应的网格后，该网格的图片会全屏放大，并显示出该项目的说明文字。制作方法HTML结构该CSS3网格布局的HTML结构中，每一个网格由3个部分组成：一个input元
2018-02-04 01:29
纯CSS3创意手机APP登录界面动画特效

这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效。该特效在用户点击登录按钮之后，按钮变形为一个小球图标，并且小球会上下弹跳，之后小球会落入界面底部成为一个图标按钮。使用方法HTML结构该手机APP登录特效的HTML结构使用嵌套div的HTML结构。为制作
2018-02-04 01:29
纯CSS3制作精美的圆形扁平风格图标

这是一组使用纯CSS3制作的精美的扁平风格的圆形图标。这些圆形图标都是使用CSS的伪元素来制作，是一套以家居为主题的图标，包括门窗，邮箱，浴室，台灯书柜等等10个图标。制作方法HTML结构图标的HTML结构非常简单。div作为包裹元素，里面的图标内容使用span元素来制作。d
2018-02-04 01:29
纯CSS3打造超逼真的Sublime编辑器界面

这是一款使用纯CSS3制作的超逼真的Sublime编辑器界面特效。该Sublime编辑器界面特效于真实的Sublime编辑器界面界面几乎一模一样，并且还带有一个光标闪动的效果。制作方法HTML结构这个Sublime编辑器界面特效的HTML结构使用一个无序列表来制作，每一个列表项是界面中的一行
2018-02-04 01:29
纯CSS3炫酷元素边框线条动画特效

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。制作方法HTML结构该边框线条动画特效的HTML结构使用的是一个空的div来作为容器。div class="bb"/div CSS样式该边框线条动画特效的两条动
2018-02-04 01:29

2种不可思议的纯CSS3 loading加载动画特效

这是一款共2种炫酷效果的纯CSS3 loading加载动画特效。该CSS3加载动画分别为弹跳的小方块和月亮绕地球旋转的动画效果。它们使用的技术都是CSS animation来实现，效果非常的震撼。制作方法HTML结构该CSS3加载动画特效的HTML结构使用的是div的嵌套结构。div class='demo-co
2018-02-04 01:29
HTML5和CSS3炫酷图片运动模糊和倾斜特效

这是一款效果非常炫酷的HTML5和CSS3图片运动模糊和倾斜特效。该图片特效在鼠标滑过图片的时候，图片产生轻微的运动模糊效果，并且图片在3D空间中会轻微的倾斜旋转，效果非常震撼。这个图片倾斜效果是使用的方法是将图片复制为多个半透明的新层，在鼠标滑过时移动和倾斜这
2018-02-04 01:29
CSS3过滤器和js制作图片颜色提取特效

这是一款使用CSS3过滤器（CSS3 Filters）和Vibrant.js制作的效果非常炫酷的图片颜色提取幻灯片特效插件。这个图片颜色提取特效可以将当前页面中显示的图片的主要色调提取出来，显示在下方方格中。并且被提取颜色的图片会变为灰色图片，非常有创意。该特效中提取图片颜色主
2018-02-04 01:29
9种CSS3 blend模式制作的鼠标滑过图片标题特效

这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效。该图片标题特效在鼠标滑过一张图片的时候，图片的标题会相应的动画，并且图片会使用css blend模式渲染为非常酷的效果。IE浏览器不支持CSS background-blend-mode属性，所以在IE浏览器中看不到图片的混
2018-02-04 01:29
CSS3炫酷鼠标滑过卡片3D翻转特效

这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时，图片被在3D空间中倾斜，当顶部滑过图片的时候，卡片平滑过渡到正常位置，卡片上的图片被缩小，同时显示出说明文字和一些链接图标。制作方法HTML结构该3D卡片翻转特效的HTML结构使用HTML5 fig
2018-02-04 01:29
纯CSS3带动画特效的创意用户帮助界面

这是一款创意十足的纯CSS3带动画效果的用户帮助界面特效。这个用户帮助界面中，每个问题选项都被制作为一个飘带，鼠标上下移动时飘带跟着移动，并且最上方还有每个问题选项的缩略图动画，非常炫酷和人性化。制作方法HTML结构这个用户帮助界面使用嵌套div的HTML结构。各种
2018-02-04 01:29
纯CSS3炫酷全屏百叶窗效果幻灯片特效

这是一款使用纯CSS3制作的效果非常炫酷的全屏百叶窗效果幻灯片特效。该幻灯片特效使用全屏背景图片制作，在幻灯片切换的时候图片会以百叶窗的方式隐藏和展现，效果非常不错。制作方法HTML结构该幻灯片特效的HTML结构采用嵌套div的HTML结构，前后导航按钮使用input和label
2018-02-04 01:29
11种炫酷CSS3复选框checkbox样式美化效果

这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。使用方法HTML结构该复选框美化效果的HTML结构如下：input type="checkbox"
2018-02-04 01:29
28种纯CSS3炫酷loading加载动画特效

这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。安装可以通过bower来按钮这个loading动画特效：bower install loaders.css
2018-02-04 01:29
纯CSS3超时尚Tabs选项卡流线型标签效果

这是一款效果非常时尚的Tabs选项卡标签的流线型线条效果。该效果使用纯CSS3来制作，效果类似eclipse软件的标签页效果。该Tabs标签使用流线型设计，并且可以自定义标签的颜色，非常实用和好看。使用方法HTML结构该流线型Tabs选项卡标签使用无序列表来制作，外面使用一个di
2018-02-04 01:29
纯CSS功能齐全的Tooltip工具提示插件

Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写，不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。安装可以使用bower或npm来安装该tooltip插件。bower install hint.cssnpm install --save hi
2018-02-04 01:29
30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成，jQuery代码只是用于隐藏加载动画。当你点击页面的任何一个地方时，loading动画就会被隐藏。这30种loading动画分为3组：方形加载动画特效、圆
2018-02-04 01:29
4种纯CSS3超酷页面切换过渡动画特效

这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成，所有的动画效果和延时都是使用CSS属性，没有任何的javascript timeout()代码。所有的4个页面切换效果都使用相同的js文件（用于点击事件和页面关闭事件）和CSS文件。
2018-02-04 01:29
实现多个元素CSS3过渡效果的js插件

AnimateTransition是一款允许在多个元素之间制作CSS3过渡效果的js插件。该过渡效果插件可以在不同的场合中使用，可以用于制作页面过渡效果，也可以用于制作各种模态窗口。该CSS3过渡效果插件通过使用硬件加速的CSS转换功能来增强其性能。它提供了12种预置的blocks动画过渡
2018-02-04 01:29
CSS3和js超酷iPhone样式科学计算器插件

CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片，纯CSS制作。该计算器是科学型的，可以处理乘方、开方、指数、对数等复杂的数学运算。它的特点有：不使用时不占用内存，不需要任何安装。使用时只占用极少的内存。关闭后会释放所有
2018-02-04 01:29

加载中...