HTML & CSS » 小创意:圣诞球切换开关

小创意:圣诞球切换开关

发表于: HTML & CSS. 评论
Sponsor

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

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

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

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }