纯CSS实现摆动的挂钟

纯CSS实现的挂钟。只是做了秒针的转动,时针和分针都是静止的。做动画展示用,不要当真。: D

钟摆使用常用曲线速度(linear,ease,ease-in,ease-out,ease-in-out)都不太自然,于是用css的贝塞尔曲线(cubic-bezier)来调整。

贝塞尔曲线工具:http://cubic-bezier.com/

 

See the Pen pure css pendulum clock by kitty wei (@kittywei) on CodePen.

CSS3 制作按钮

最近在学习CSS3,利用CSS3的text-shadow/box-shadow/border-radius和background gradient 属性就可以写出很多漂亮的图案,减少图片加载的时间。

自己试着写了一个简单的小按钮:

设计图如下:

button_design

效果:

See the case study

代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a id="css_button" href="#">See the case study </a>

圆角和圆形靠border-radius实现,渐变的背景色依靠background gradient,三角形则依靠border来实现。

a标签需要有block属性,否则IE下的背景渐变无法显示。IE下效果的确不如FF、Chrome。

 

按钮的设计参考http://ohmedia.ca/这一网站。