纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

纯CSS3/SVG实现的带秒针表盘圆盘复古时钟
HTML5应用,HTML5时钟,SVG

现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。

HTML5 CSS3学习

The clock on the disc nowadays is less and less the clock, more is the digital clock and digital calendar. before we share some of the jquery and css3 based disc clock animation, such as pure css3 3d disc circular animation and jquery to achieve a wall clock disc animation are very good. this time to bring you a more retro disk clock, based on pure css3, the disk is drawn svg, and did not use any picture. the overall appearance of the clock is more nostalgic, giving a different visual experience.
Html5 css3 learning

Update Time: 16:00

纯CSS3可爱笑脸开关切换按钮

纯CSS3可爱笑脸开关切换按钮
HTML5应用,CSS3按钮

近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮,像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观,还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意,整个开关按钮由笑脸和哭脸组成,点击按钮后可以在笑脸哭脸之间切换,另外按钮带有阴影,看起来有3D立体的视觉效果。

HTML5 CSS3学习

Recently, we have focused on sharing a lot of switch buttons based on html5 and css3, such as this multi-group of innovative css3 switch button has a multi-style appearance, as well as this beautiful css3 / svg personalized switch button very creative. today to share this also creative, the switch button consists of smiling face and crying face, click the button you can switch between smiley face, the other with a shadow button, it seems 3d stereo visual effects.
Html5 css3 learning

Update Time: 16:00

CSS3鼠标滑过图片覆盖渐变颜色蒙版

CSS3鼠标滑过图片覆盖渐变颜色蒙版
HTML5应用,CSS3动画,图片特效

今天我们要介绍一款比较实用的CSS3图片特效,它并没有非常华丽的动画效果,但是很多场合都可以用到。当我们将鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,同时这层蒙版由于颜色动态渐变,因此给人一种发光的视觉效果。

HTML5 CSS3学习

Today we have to introduce a more practical css3 picture effects, it does not have a very gorgeous animation, but many occasions can be used. when we mouse over the picture, the top of the picture will be covered with a gradient color mask, remove the picture mask will disappear in a gradual manner, at the same time this layer of the mask due to the dynamic color gradient, giving a glow visual effects.
Html5 css3 learning

Update Time: 16:00

CSS3带数字时钟的创意圆盘时钟动画

CSS3带数字时钟的创意圆盘时钟动画
HTML5应用,CSS动画,HTML5时钟

前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟,大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟,它的特点是圆盘对半分,一半显示数字时钟信息,另一半是半个圆盘时钟,样式设计上非常富有创意。

HTML5 CSS3学习

A few days ago we just have to share a retro disc clock based on svg and css3, we can see the demo here and download the source code here. today we have to bring another css3 disk clock, it is characterized by a half on the disk, half digital clock information display, the other half is a half-disk clock, style design is very creative.
Html5 css3 learning

Update Time: 16:00

纯CSS3乒乓球动画

纯CSS3乒乓球动画
HTML5应用,CSS动画

这是一个比较有意思的纯CSS3乒乓球动画特效,主要是模拟了乒乓球运动动画,画面上用CSS3绘制了一张乒乓球桌,一个乒乓球在球桌上来回运动,就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的,有兴趣的同学可以自己研究一下。

HTML5 CSS3学习

This is a more interesting pure css3 table tennis animation effects, mainly to simulate the table tennis animation, draw a table with a css3 table tennis table, a table tennis back and forth exercise at the table, as if two athletes the same as playing ping pong. of course, if you can draw two athletes at both ends of the table, it is more realistic, interested students can study for themselves.
Html5 css3 learning

Update Time: 15:59

HTML5 多维度3D图片切换动画

HTML5 多维度3D图片切换动画
HTML5应用,HTML5焦点图

今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件,这款焦点图插件可以实现XY两个维度的图片切换动画,并且图片在排列时有一种3D立体的视觉效果,这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。

HTML5 CSS3学习

Today we want to share with you a very special html5 / css3 focus map plug-in, this focus map plug-in xy images can be two dimensions to switch animation, and pictures in the arrangement of a 3d stereo visual effects, so the effect it is the use of css3 special attributes changed the picture 4 side of the tilt angle.
Html5 css3 learning

Update Time: 15:59

CSS3自定义菜单内容的二级下拉菜单

CSS3自定义菜单内容的二级下拉菜单
HTML5应用,CSS3菜单

之前我们分享过很多基于jQuery和CSS3的二级下拉菜单,大部分都非常实用,当然也不乏炫酷的动画,比如这款HTML5/CSS3水平二级下拉菜单就比较朴实,这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义,可以是简单的多列,也可以是复杂的图文排版。

HTML5 CSS3学习

Before we share a lot of secondary drop-down menu based on jquery and css3, most of them are very useful, of course, no lack of cool animation, such as this html5 / css3 level two drop-down menu is more simple, this jquery / css3 wave elastic drop-down menu is more personalized. today we want to share this css3 drop-down menu is characterized by two drop-down menu content can be customized, can be a simple multi-column, can also be a complex graphic layout.
Html5 css3 learning

Update Time: 15:59

CSS3社交关系网模拟动画

CSS3社交关系网模拟动画
HTML5应用,CSS3动画

这次我们要给大家分享一款CSS3模拟社交关系网的动画特效,社交网的中心是用户的头像图片,由中心连线展开到各个社交网络的Logo图片,同时每一条连接线上面都会有一个圆点由中心向各个节点移动,形成关系网的模拟动画,利用CSS3,我们可以让点运动,也可以让图片变成圆形,还是比较有趣的。

HTML5 CSS3学习

This time we want to share with you a css3 simulation social network animation effects, the center of the social network is the user's avatar picture, from the center to expand to each social network logo picture, at the same time each link will have a dot from the center to each node to move to form a network of simulation animation, the use of css3, we can make the point of movement, but also make the picture into a circle, or more interesting.
Html5 css3 learning

Update Time: 15:59