CSS之美

一些有趣的交互实例分享

吴梦圆 / @小雪-Joanna
Women Techmaker@Shanghai 2016.03.26

CSS Triangle

# Case 1

Login

try online

Result

try online

# Case 2

Signup

## Key: - sprite - background-position

# Case 3

Loading

Check it out

# Case 4

Team

## Key: - CSS Sprite - Cursor position -> background-position

# How - Design inspiration - Techniques

# Inspiration - [Little Big Details](http://littlebigdetails.com/) - [CSS Design Award](http://www.cssdesignawards.com/wotd-award-nominees) - [AWWWARDS](http://www.awwwards.com/awards-of-the-day/)

# Tech - CSS Animation / keyframes - CSS Transform / cubic-bezier - New API: [RequestAnimationFrame](https://www.w3.org/TR/animation-timing/) & [Will-Change](https://drafts.csswg.org/css-will-change/) - Frameworks: [Famous](http://famous.org/) / [GreenSocks](https://greensock.com/) - Performance

# CSS Game?

Key:

1. clip-path to draw the wall (chrome only)

2. CSS transitions to slowly move the scenery

3. Hover states for the two walls (and the "game over" screen)

Thank you

吴梦圆

• 阿里云 体验技术部 前端开发工程师

主页 / Github / Douban / @小雪-Joanna