小创意:圣诞球切换开关

还有几天就到圣诞节,几乎到哪里都能看到圣诞气氛的设计,网站也是如此,为了让网站页面更有气氛,我们不能放过任何小创意,即使是一个小小的切换开关元素。

大家请看下图,这是来自 Chris Gannon 制作的圣诞球开关,使用 CSS + JS 实现,当然用纯 CSS3 样式代码也能实现这样的效果。

实例名称:立体圣诞球节切换开关
在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp

一共有2个样式,默认为红色,点击开关后,就会过渡到绿色,球体看似带有立体感,在过渡的时候,星星图案与背景都有动画过渡特效,整体效果非常流畅好看。

这个创意可以用在圣诞主题的 APP UI界面或网页上使用,虽然是很细微的创意,但对于专注细节的设计师,请不要放过这些idea~

发表评论

邮箱地址不会被公开。 必填项已用*标注