Use HTML and CSS to implement the animation effect on WWDC2015-

Apple icons usually use overlapping colors and shapes, such as iOS7Photos icons. This year's WWDC invitation letter is made up of several stacked columns and translucent shapes. It is very suitable for HTML and CSS. So I decided to use HTML and CSS to implement it ....,.

Every year, Apple holds a major meeting. WWDC (Apple Developer Conference) is a good opportunity for iOS developers and OSX developers to learn new concepts of Apple's advanced technologies and mobile devices and desktop software.

Every year, they will make a lot of new ideas. This year, I was amazed by an icon made from simple circles and shapes, so I decided to use HTML and CSS to implement it.

WWDC 15 Invitation Card

Apple icons usually use overlapping colors and shapes, such as iOS 7 Photos icons. This year's WWDC invitation letter used the following goods.

Reuse CSS

This is an interesting experiment, but I think the biggest achievement is to reuse CSS. It is very convenient to use the same CSS for rotation and small shapes. The same keyframes is used for all the animations. This helps to compress the size of CSS files and ensure the loading speed.

Prefix

When I created this example, I used autoprefixer, so that I don't have to consider the browser kernel every time I write an animation.

The above is the content that uses HTML and CSS to implement the animation effect on WWDC 2015. For more information, see PHP Chinese website (www.php1.cn )!