罗马时钟
CSS+JS实现拥有罗马数字金属骨架外观的罗马模拟时钟通过CSS结合JavaScript实现的罗马模拟时钟,时钟的表盘是通过罗马数字符号的金属架构组成的,相当有金属质感和古老风格的一款时钟效果。并且支持鼠标悬浮显示阿拉布数字的时间提示。实现这一款...
翻页时钟
CSS翻页效果主题数字时钟一款通过CSS结合JavaScript技术实现的翻页效果数字时钟,数字时钟的时分秒数字变化像是翻页一样特别的有创意。基本的HTML代码结构如下,通过CSS设置时分秒三块区域的样式及动画效果,J...
饼图钟表
SVG+CSS饼图主题模拟时钟,指针扫过的区域是一个饼图!基于CSS+JS+SVG实现的一款创意模拟时钟,钟表指针扫过的区域阴影部分是一个饼图效果,而整个钟表的表面被划分为了三个不同颜色的区域,其中钟表素材是由svg实现的,饼图时钟整体效果是由CSS实...
数字串钟表
CSS+JS实现通过当前时间的时分秒数字串起来的指针组成的创意模拟时钟!一款特别有创意的模拟时钟效果,钟表的时分秒常见指针都是通过当前时间所对应的数字串联到一起的,随着时间规则的走动。这款有趣的钟表效果实现起来也很简单,通过CSS绘制表盘以及指针行走动画,JavaS...
滚动开关
CSS实现具有滚动效果的切换开关按钮基于纯CSS实现一个滚动(Rolling Check)样式的切换开关(Toggle Switch)按钮,这种开关在切换状态时标识开关的图标会有一个平滑的滚动动画,并且伴随着图标的变化,使得用户界...
开关按钮
CSS实现Gooey黏糊糊拨动开关按钮,气泡挤到一侧效果!通过CSS结合JS实现的黏糊糊动画效果开关拨动按钮,这种动画也像是泡泡被挤到一侧效果。其中的按钮是通过SVG矢量图实现的,CSS实现整体的动画效果,JavaScript响应按钮点击的切换事件。
拉伸单选框
CSS+JS实现创意拉伸传递效果单选框radio按钮基于CSS结合JavaScript实现的一款极具创意的拉伸传递效果单选按钮,进行单选选择时,会有一个从上次选中选项区域到当前选中选项区域的一个拉伸动画效果,并使「选项」下落到选中位置。交互性和趣...
玻璃环进度条
SVG+CSS构建的玻璃质感圆形进度条,并带有发光填充效果通过SVG和CSS创建了一款玻璃质感的圆形进度条,进度条的加载刻度过程效果是基于:蓝色发光填充效果逐渐填充整个玻璃环实现的,玻璃质感环的中间部分显示加载进度值。当加载完成刻度值到达100%后...
切换搜索选项
CSS+JS实现点击放大镜查找图标动态调整搜索选项的创意搜索框这款搜索框太太太有创意了!这简约风格、这实用功能真的太好用了!通过CSS技术在常规的搜索框基础上添加了搜索图标也就是放大镜小图标的动画效果,当点击放大镜时会响应搜索类型切换的功能,并且放大镜会做...
滑动开关
CSS实现Skeuomorphic拟物化风格立体滑动开关通过CSS实现的一款时尚的Skeuomorphic拟物化风格开关按钮,点击按钮滑动开关实现状态切换,滑动过程中按钮底色会发生变化以突出开光状态的切换。整个按钮切换滑动的动画特别的丝滑,背景仿照了...
圣诞星
CSS圣诞树上的星星流光动画Loading加载中效果通过CSS结合SVG实现的一款多层嵌套星星效果,其中页面的常见素材都是由SVG实现的,特别轻量级,每一层的星星边款都有一小段流光弧线在沿着星星的外围快速环绕游走,整个动画效果特别有节奏,非常适...
啤酒加工
CSS啤酒装瓶加工过程动画Loading加载中效果,非常有创意的一款预加载器将啤酒的生产加工过程动画放入页面预加载过程中一定非常有趣,所以我为大家分享这款通过CSS实现的啤酒加盖过程Loading加载中动画效果,让用户在等待页面加载的过程中也能减少用户的疲劳感。实现过程...