Good to all. I'm in web design without a year a week. Two days was played by copying the header from one site. And that didn’t work out to the end. I hope you will help clarify the question that interests me. How to make an animation when you hover, like social icons. networks in the upper left corner and the menu indicator. As I understand it, you need to pervert it somehow in Js (I haven’t ever walked there at all), or is it possible to describe all html-css? Sh-link: http://www.kriesi.at/themes/eunoia

    2 answers 2

    The Internet is full of different tutorials on css-animations. Here, for example, a good resource http://learn.shayhowe.com/advanced-html-css/transitions-animations/ And this is the solution to your question:

    body{ background-color: #f0f0f0; } .icon{ position: relative; margin-top: 50px; padding: 10px; color: #a7a7a7; font-size: 1.5em; transition: all 0.3s ease; } .icon .fa{ position: relative; z-index: 1; } .icon:after{ content: ''; position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; height: 0; width: 0; background-color: #fff; transition: all 0.2s ease; } .icon:hover{ border-radius: 50%; color: #fff; } .icon:hover:after{ background-color: #e44885; height: 100%; width: 100%; } 
     <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" /> <a href="#" class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></a>

      When it’s interesting how any element is folded on a page, you can view its code and markup. (For example, in Chrome and similar browsers, there is an item “View element code” or similar in the context menu.) Thus, you can quickly learn effects that are of particular interest to you. All that is still unknown is simply found in a search engine.

      To animate the desired element of the page (without using scripts) by hovering the cursor, we write the CSS markup for the pseudo-class: hover of this element. In fact, there are only some parameters that change (for example, the color of the background, the thickness of the borders, the location, perhaps a slight turn or scale ...) and the transition-duration property is set with the desired duration of a smooth transition.

      In general, try, everything is simple.