CSS is powerful!
during my GitHub Page building, I have tried some css tricks, such as the omit of items according to the width in top panel; put the panel on the top; and the spinning avatar and so on.
Spin avatar
this is my spinning avatar, try to put arrow on it:
And its implement is only several lines:
#picture {
-webkit-transition: -webkit-transform 1.6s ease-in-out;
transition: transform 1.6s ease-in-out;
}
#picture:hover {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
animation
However, CSS cannot only do this, I found an animation implemented totally by CSS in a site built by my friend:
And I also found a changing taichi graph implemented totally by css, and the author wrote a blog to explain the process, and he gave other implement ways, like Canvas+JavaScript, and SVG+JavaScript:
And following is a card when you put arrow on it, it will turn over and show the contents in the back.
Click to return home!
hover to check the content back
Summary
This is a simple introduction of fancy work by css, and these are only a little part of works css can do, css is very powerful, we can use it to do many things and make our websites more fancy.