Anyone who has posted Twitter knows the image below, which is a Twitter error. One is Steve Dennis.
New Zealand web
The front-end designer uses pure CSS to generate this image. If you use a WebKit-based browser (Safari or
Chrome), the screen can still be moved. However, for IE browsers, the generated results are still unsatisfactory.
The author was inspired by a Twitter crash. When this screen appeared on the Twitter page, he had a whimsy and hoped to use CSS
Generate the same picture and add the animation effect.
How to Implement
In fact, it is not easy. It is manually encoded and constantly tested and failed. Use CSS for curves
It took a weekend to use the container mask for complex lines. But I don't want to try the second round.
In ie?
The following is the effect generated in IE8, Which is unsatisfactory.
Feedback
I have received more than feedbacks in my blog. Some people mentioned some problems in the iPhone, but it is perfect in Android. However, this CSS
Some people mentioned that it is easier to Implement CSS with SVG. However, the significance of this work is to perform a cruel test on CSS capabilities. It seems that CSS
Although the process is painful.
International Source: subcide.com pure
CSS Twitter fail whale
(Author: Steve Dennis
)
Chinese compiling Source:Ruishang enterprise CMS
Website content management system
Official Website