Make an online resume (iii)--Skills Introduction

First, the structure

The structure is still very simple, the stars are selected in the font-awsome symbol, the entire structure is a table table to build, choose two background color as the top and left of the background.

Here because of the use of custom fonts, there is a problem, that is, when the point to this Star page, the font has not yet loaded in, this time the star's location is either garbled or not, the back went to find a solution, using webfont loader, The corresponding font-family CSS style is applied in the callback function of the font loading success.

        <Scriptsrc= "Js/webfontloader.js"></Script>        <Script>webfont.load ({custom: {families: ['Fontawesome']            }          }); </Script>

The operation of table has also been recorded, can be found in "Some Records on table" .

The leftmost column also uses some pseudo-class selectors: First-child.

<Tableclass= "User_skill">                    <thead>                        <TR>                            <th></th>                            <th><h6>Beginner</h6></th>                            <th><h6>Familiar with</h6></th>                            <th><h6>Master</h6></th>                            <th><h6>Good</h6></th>                            <th><h6>Master</h6></th>                        </TR>                    </thead>                    <tbody>                        <TR>                            <TD><h5>Html</h5></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                        </TR>                        <TR>                            <TD><h5>Css</h5></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD><Iclass= "Fa-star"></I></TD>                            <TD></TD>                            <TD></TD>                        </TR>    </tbody></Table>

. User_skill tbody TR td:first-child {    text-align:right;     margin-right:5px;} . User_skill tbody tr td:first-child h5 {    background:#f26d7d;     display:inline-block;     padding:5px;}

Second, the animation of the stars

These stars have an effect when you first enter the screen. This animation I chose from animate.css , called Lightspeedin. The CSS directly copied over the time is not moving, I found that I wrote less a parameter animation-duration. The Transition property in CSS is the transition effect that is set when a row is crossed.

. User_skill tbody TR TD I{font-size:2rem;-webkit-animation-name:Lightspeedin;-webkit-animation-duration:1s;-webkit-animation-timing-function:Ease-out;Animation-name:Lightspeedin;animation-duration:1s;animation-timing-function:Ease-out;-moz-transition:All . 4s ease;-o-transition:All . 4s ease;-webkit-transition:All . 4s ease;transition:All . 4s ease;}@-webkit-keyframes Lightspeedin{0% {-webkit-transform:Translate3d (100%, 0, 0) skewx ( -30deg);Transform:Translate3d (100%, 0, 0) skewx ( -30deg);Opacity:0; }60%{-webkit-transform:skewx (20deg);Transform:skewx (20deg);Opacity:1; }80%{-webkit-transform:skewx ( -5deg);Transform:skewx ( -5deg);Opacity:1; }100%{-webkit-transform:None;Transform:None;Opacity:1; }} @keyframes Lightspeedin{0% {-webkit-transform:Translate3d (100%, 0, 0) skewx ( -30deg);Transform:Translate3d (100%, 0, 0) skewx ( -30deg);Opacity:0; }60%{-webkit-transform:skewx (20deg);Transform:skewx (20deg);Opacity:1; }80%{-webkit-transform:skewx ( -5deg);Transform:skewx ( -5deg);Opacity:1; }100%{-webkit-transform:None;Transform:None;Opacity:1; }}

Three, the effect of a row

When I let the mouse across a line, I will let the stars rotate 180 °, and Zoom 1.5 times times, the color becomes red. Transform can write multiple attributes together.

. User_skill tbody tr:hover i {    -webkit-transform: rotate (180deg) scale (1.5);     -moz-transform: rotate (180deg) scale (1.5);     -o-transform: rotate (180deg) scale (1.5);     -ms-transform: rotate (180deg) scale (1.5);     transform: rotate (180deg) scale (1.5);     color:#f26d7d;}

SOURCE Download:

http://download.csdn.net/detail/loneleaf1/8849069

Make an online resume (iii)--Skills Introduction