这是一款带阅读进度指示的侧边栏列表项UI设计效果。该设计的目的是在用用户滚动鼠标时,在侧边栏列表项中每一个段落标题前都带有一个指示当前段落阅读进度的圆形进度条,使用户可以看到当前的阅读进度,提升用户体验。该阅读指示UI设计使用SVG,CSS3和jQuery来制作。另外
2018-02-04 01:30这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果。在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果。使用方法HTML结构该动态网格卡片布局的HTML结构基于Bootstrap网格系统来实现。使用
2018-02-04 01:30这是一款效果非常炫酷的仿Twitter“点赞”红心按钮CSS3动画特效。该“点赞”特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会在心形按钮的四周产生类似烟花爆炸的效果。使用方法HTML结构该“点赞”红心按钮的HTML结构是将心形按钮放在一
2018-02-04 01:30这是一组使用纯CSS3制作的扁平风格的图标。这组图标共有16个,所有图标均由CSS渲染而成,没有使用任何图片。其中有5个图标在鼠标滑过时带有动画特效。使用方法HTML结构所有的图标都是以div.icon作为包裹容器,里面放置需要的元素。在email图效果中,它的HTML结构如下:di
2018-02-04 01:30这是一款使用CSS3和透明几何图形遮罩图片制作的炫酷的不规则图片遮罩和缩放动画特效。该特效使用预先制作好的几何图形图片来作为图片制作,在鼠标滑过图片时,几何图形会有好看的缩放过渡动画效果。因为该特效的几何图形不是使用CSS3来制作的,所以它有非常好的浏览器兼容
2018-02-04 01:30CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素,并且非常容易的就可以制作出轮播图的效果。使用方法使用该CSS苹果设备模型特效需要在页面中引入devices.min.css文件,可以选择引入jQuery
2018-02-04 01:30这是一款效果非常炫酷的网站列表页文章卡片UI界面设计效果。该文章卡片中包含了文章的缩略图、标题、文章简介等内容。文章的简介默认是不可见的,当鼠标滑过卡片时,缩略图被缩小,文章简介内容随之滑动显示出来。使用方法HTML结构该文章卡片的HTML结构如下:div class='
2018-02-04 01:30MathCSS是一款简单易用的可生成高等数学公式的纯CSS样式。通过MathCSS可以将特定HTML结构渲染为非常复杂的高等数学公式,如积分、求和、乘积等。MathCSS的特点有:快速生成积分、求和、乘积等高等数学公式。MathCSS不依赖于JS,渲染速度快。响应式设计特定的数学符号不必
2018-02-04 01:30这是一款使用JavaScript和CSS3制作的兼容移动手机的侧边栏多级导航菜单UI设计效果。该多级菜单侧边栏布局的菜单列表切换时带有非常酷的动画延迟效果,并且在侧边栏顶部还带有面包屑导航。另外,该多级菜单侧边栏使用媒体查询在移动手机等小屏幕设备中,会将菜单隐藏,只显
2018-02-04 01:30这是一款构思新颖的时尚价格表界面设计效果。价格表是网站为用于提供数字化服务的必要组件。这组价格表设计方案共有12种不同的效果,它们都是基于flexbox来制作的。使用方法HTML结构所有价格表的主要的HTML结构如下:div class="pricing pricing--sonam"div class="prici
2018-02-04 01:30这是一款效果非常炫酷的全屏双面板内容切换UI设计效果。该UI设计使用CSS3和jQuery来制作双面板效果,左右两个面板可以通过箭头按钮来相应切换具体的内容,在内容切换时带有一些3D效果,非常炫酷。使用方法HTML结构该全屏双面板的HTML结构的要点是:外部包裹容器的宽度是视
2018-02-04 01:30这是一款效果非常炫酷的汉堡包图标变形为菜单列表项动画特效。在这个特效中,用户点击了汉堡包按钮之后,汉堡包图标的线条会变长,之后动画过渡到菜单列表状态。整个转换动画平滑流畅,效果非常酷。使用方法HTML结构该汉堡包变形动画特效的基本HTML结构如下:div class="
2018-02-04 01:30这是一款使用CSS3制作的手机APP切换页面动画过渡效果。该页面切换动画效果只设计了两个页面,可以点击前一页和上一页按钮来回切换,并在页面切换的时候使用CSS3制作了非常炫酷的过渡动画效果。使用方法HTML结构该手机APP页面切换特效的HTML结构如下:div id='phone'div i
2018-02-04 01:30这是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框,文本动画以及流光动画效果,各种效果都非常有创意。使用方法HTML结构按钮的HTML结构使用嵌套div结构来制作。这里以第6种效果为例。
2018-02-04 01:30这是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮,以不同的方式将最上面的卡片切换到底部。这14最后卡片切换动画创意十足,效果非常炫酷。使用方法HTML结构在第一种效果中,它的HTML结构如下:ul元素中的图片将被制作为一
2018-02-04 01:30这是一组效果非常炫酷的网页介绍标题文字动画特效。这组文字动画效果共有8种效果,分别为弹性效果,文字剪裁效果,文字遮罩效果,视觉差效果,反转效果,文字缩放效果和全屏视频背景效果。使用方法HTML结构所有文字动画效果的HTML结构都非常简单:使用一个section.cd-int
2018-02-04 01:30这是一款非常简洁的浮动标签提交表单用户界面设计效果。这个浮动标签效果包括输入框浮动标签,下拉列表浮动标签和文本域浮动标签。该浮动标签表单简洁大方,是设计表单不错的选择。使用方法HTML结构以文本框的浮动标签效果为例,它的HTML结构如下:使用一个div作为包裹元
2018-02-04 01:30CSSgram是一款实现类似Instagram应用的图片过滤特效的CSS库。该CSS库使用伪元素来创建图片过滤效果,它内置有13种不同的图片过滤特效,可用于网页图片的美化。Instagram是一款最初运行在iOS平台上的移动应用,以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享彼此,
2018-02-04 01:29这是一款效果非常炫酷的纯CSS3带阴影效果的剪纸文字动画特效。它利用伪元素来制作文字脱离屏幕的剪纸效果,并在伪元素上执行旋转和缩放,使其在鼠标滑过是产生关门的动画特效。使用方法HTML结构该剪纸文字动画的HTML结构是在p元素里放置一组span元素,每一个span元素是一
2018-02-04 01:29这是一款使用Font Awesome图标制作的超链接动画特效。该特效在鼠标滑过超链接时,使用CSS3的transition和transform属性来制作各种Font Awesome图标的动画效果。使用方法HTML结构该超链接动画特效的HTML结构非常简单,就是一个普通的超链接a元素。ullia href="#"Bump Righ
2018-02-04 01:29