使用CSS3制作一个有趣的搜索框

CSS3

动画效果在交互设计中占据着一个非常重要的位置,因为当我们在设计一个产品的时候,我们不仅仅是在设计它的外观,更是在设计它的行为。举例来说,一个好的演员可以利用他的动作、肢体语言使观众感受到角色的内心与特点,甚至将观众带入到相同的内心中,感同身受。同理,一系列好的动画设计,可以让使用者更容易了解产品的用法,感受到产品的特点,从而提升用户体验,甚至是让用户发出“Awesome! I love it!”的感叹。(关于动画到底是如何提升用户体验的,请看Alfredo Aponte的PPT:UX: Enhancing Experiences with Animation。)

如今CSS3的日趋成熟,使我们制作网页中动画效果的方式更加的方便和多样,下面让我们来看看使用CSS3如何制作一个有趣的搜索框,所使用到的属性包括tansformanimationkeyframes。最终效果情况本站右上角。