CSS3 a very nice sliding switch effect

Source: Internet
Author: User
Tags numeric

The social symbols used here refer to a CSS file

The code is as follows Copy Code

/* FONT PATH


* -------------------------- */


@font-face {


font-family: ' Fontawesome ';


Src:url ('.. /fonts/fontawesome-webfont.eot?v=4.0.3 ');


Src:url ('.. /fonts/fontawesome-webfont.eot #iefix &v=4.0.3 ') format (' Embedded-opentype '), url (' ... /fonts/fontawesome-webfont.woff?v=4.0.3 ') format (' Woff '), url ('.. /fonts/fontawesome-webfont.ttf?v=4.0.3 ') format (' TrueType '), url ('.. /fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular ') format (' SVG ');


Font-weight:normal;


Font-style:normal;


}


. FA {


Display:inline-block;


Font-family:fontawesome;


Font-style:normal;


Font-weight:normal;


Line-height:1;


-webkit-font-smoothing:antialiased;


-moz-osx-font-smoothing:grayscale;


}


/* makes the font 33% larger relative to the icon container * *


. fa-lg {


Font-size:1.3333333333333333em;


Line-height:0.75em;


Vertical-align:-15%;


}


. fa-2x {


Font-size:2em;


}


. fa-3x {


Font-size:3em;


}


. fa-4x {


Font-size:4em;


}


. fa-5x {


Font-size:5em;


}


. FA-FW {


Width:1.2857142857142858em;


Text-align:center;


}


. fa-ul {


padding-left:0;


Margin-left:2.142857142857143em;


List-style-type:none;


}


. Fa-ul > Li {


position:relative;


}


. fa-li {


Position:absolute;


Left: -2.142857142857143em;


Width:2.142857142857143em;


Top:0.14285714285714285em;


Text-align:center;


}


. fa-li.fa-lg {


Left: -1.8571428571428572em;


}


. fa-border {


padding:. 2em. 25em. 15em;


Border:solid 0.08em #eeeeee;


Border-radius:. 1em;


}


. pull-right {


Float:right;


}


. pull-left {


Float:left;


}


. fa.pull-left {


Margin-right:. 3em;


}


. fa.pull-right {


Margin-left:. 3em;


}


. fa-spin {


-webkit-animation:spin 2s infinite linear;


-moz-animation:spin 2s infinite linear;


-o-animation:spin 2s infinite linear;


Animation:spin 2s infinite linear;


}


@-moz-keyframes Spin {


0% {


-moz-transform:rotate (0DEG);


}


100% {


-moz-transform:rotate (359DEG);


}


}


@-webkit-keyframes Spin {


0% {


-webkit-transform:rotate (0DEG);


}


100% {


-webkit-transform:rotate (359DEG);


}


}


@-o-keyframes Spin {


0% {


-o-transform:rotate (0DEG);


}


100% {


-o-transform:rotate (359DEG);


}


}


@-ms-keyframes Spin {


0% {


-ms-transform:rotate (0DEG);


}


100% {


-ms-transform:rotate (359DEG);


}


}


@keyframes Spin {


0% {


Transform:rotate (0DEG);


}


100% {


Transform:rotate (359DEG);


}


}


. fa-rotate-90 {


Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);


-webkit-transform:rotate (90DEG);


-moz-transform:rotate (90DEG);


-ms-transform:rotate (90DEG);


-o-transform:rotate (90DEG);


Transform:rotate (90DEG);


}


. fa-rotate-180 {


Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2);


-webkit-transform:rotate (180DEG);


-moz-transform:rotate (180DEG);


-ms-transform:rotate (180DEG);


-o-transform:rotate (180DEG);


Transform:rotate (180DEG);


}


. fa-rotate-270 {


Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);


-webkit-transform:rotate (270DEG);


-moz-transform:rotate (270DEG);


-ms-transform:rotate (270DEG);


-o-transform:rotate (270DEG);


Transform:rotate (270DEG);


}


. fa-flip-horizontal {


Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=0, mirror=1);


-webkit-transform:scale (-1, 1);


-moz-transform:scale (-1, 1);


-ms-transform:scale (-1, 1);


-o-transform:scale (-1, 1);


Transform:scale (-1, 1);


}


. fa-flip-vertical {


Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2, mirror=1);


-webkit-transform:scale (1,-1);


-moz-transform:scale (1,-1);


-ms-transform:scale (1,-1);


-o-transform:scale (1,-1);


Transform:scale (1,-1);


}


. fa-stack {


position:relative;


Display:inline-block;


Width:2em;


Height:2em;


Line-height:2em;


Vertical-align:middle;


}


. fa-stack-1x,


. fa-stack-2x {


Position:absolute;


left:0;


width:100%;


Text-align:center;


}


. fa-stack-1x {


Line-height:inherit;


}


. fa-stack-2x {


Font-size:2em;


}


. fa-inverse {


Color: #ffffff;


}


/* Font Awesome uses the Unicode Private use Area (PUA) to ensure screen


Readers don't read off random characters that represent icons * *


. fa-glass:before {


Content: "f000";


}


. fa-music:before {


Content: "f001";


}


. fa-search:before {


Content: "f002";


}


. fa-envelope-o:before {


Content: "F003";


}


. fa-heart:before {


Content: "f004";


}


. fa-star:before {


Content: "f005";


}


. fa-star-o:before {


Content: "f006";


}


. fa-user:before {


Content: "f007";


}


. fa-film:before {


Content: "f008";


}


. fa-th-large:before {


Content: "f009";


}


. fa-th:before {


Content: "f00a";


}


. fa-th-list:before {


Content: "f00b";


}


. fa-check:before {


Content: "f00c";


}


. fa-times:before {


Content: "f00d";


}


. fa-search-plus:before {


Content: "f00e";


}


. fa-search-minus:before {


Content: "f010";


}


. fa-power-off:before {


Content: "f011";


}


. fa-signal:before {


Content: "f012";


}


. Fa-gear:before,


. fa-cog:before {


Content: "f013";


}


. fa-trash-o:before {


Content: "f014";


}


. fa-home:before {


Content: "F015";


}


. fa-file-o:before {


Content: "f016";


}


. fa-clock-o:before {


Content: "f017";


}


. fa-road:before {


Content: "f018";


}


. fa-download:before {


Content: "f019";


}


. fa-arrow-circle-o-down:before {


Content: "F01A";


}


. fa-arrow-circle-o-up:before {


Content: "f01b";


}


. fa-inbox:before {


Content: "f01c";


}


. fa-play-circle-o:before {


Content: "f01d";


}


. Fa-rotate-right:before,


. fa-repeat:before {


Content: "f01e";


}


. fa-refresh:before {


Content: "f021";


}


. fa-list-alt:before {


Content: "f022";


}


. fa-lock:before {


Content: "f023";


}


. fa-flag:before {


Content: "f024";


}


. fa-headphones:before {


Content: "f025";


}


. fa-volume-off:before {


Content: "f026";


}


. fa-volume-down:before {


Content: "f027";


}


. fa-volume-up:before {


Content: "f028";


}


. fa-qrcode:before {


Content: "f029";


}


. fa-barcode:before {


Content: "f02a";


}


. fa-tag:before {


Content: "f02b";


}


. fa-tags:before {


Content: "F02C";


}


. fa-book:before {


Content: "f02d";


}


. fa-bookmark:before {


Content: "f02e";


}


. fa-print:before {


Content: "f02f";


}


. fa-camera:before {


Content: "f030";


}


. fa-font:before {


Content: "f031";


}


. fa-bold:before {


Content: "f032";


}


. fa-italic:before {


Content: "f033";


}


. fa-text-height:before {


Content: "f034";


}


. fa-text-width:before {


Content: "f035";


}


. fa-align-left:before {


Content: "f036";


}


. fa-align-center:before {


Content: "f037";


}


. fa-align-right:before {


Content: "f038";


}


. fa-align-justify:before {


Content: "f039";


}


. fa-list:before {


Content: "f03a";


}


. Fa-dedent:before,


. fa-outdent:before {


Content: "f03b";


}


. fa-indent:before {


Content: "f03c";


}


. fa-video-camera:before {


Content: "f03d";


}


. fa-picture-o:before {


Content: "f03e";


}


. fa-pencil:before {


Content: "f040";


}


. fa-map-marker:before {


Content: "f041";


}


. fa-adjust:before {


Content: "f042";


}


. fa-tint:before {


Content: "f043";


}


. Fa-edit:before,


. fa-pencil-square-o:before {


Content: "f044";


}


. fa-share-square-o:before {


Content: "f045";


}


. fa-check-square-o:before {


Content: "f046";


}


. fa-arrows:before {


Content: "f047";


}


. fa-step-backward:before {


Content: "f048";


}


. fa-fast-backward:before {


Content: "f049";


}


. fa-backward:before {


Content: "f04a";


}


. fa-play:before {


Content: "f04b";


}


. fa-pause:before {


Content: "F04C";


}


. fa-stop:before {


Content: "F04D";


}


. fa-forward:before {


Content: "f04e";


}


. fa-fast-forward:before {


Content: "f050";


}


. fa-step-forward:before {


Content: "f051";


}


. fa-eject:before {


Content: "f052";


}


. fa-chevron-left:before {


Content: "f053";


}


. fa-chevron-right:before {


Content: "f054";


}


. fa-plus-circle:before {


Content: "f055";


}


. fa-minus-circle:before {


Content: "f056";


}


. fa-times-circle:before {


Content: "f057";


}


. fa-check-circle:before {


Content: "f058";


}


. fa-question-circle:before {


Content: "f059";


}


. fa-info-circle:before {


Content: "f05a";


}


. fa-crosshairs:before {


Content: "f05b";


}


. fa-times-circle-o:before {


Content: "f05c";


}


. fa-check-circle-o:before {


Content: "f05d";


}


. fa-ban:before {


Content: "f05e";


}


. fa-arrow-left:before {


Content: "f060";


}


. fa-arrow-right:before {


Content: "f061";


}


. fa-arrow-up:before {


Content: "f062";


}


. fa-arrow-down:before {


Content: "f063";


}


. Fa-mail-forward:before,


. fa-share:before {


Content: "f064";


}


. fa-expand:before {


Content: "f065";


}


. fa-compress:before {


Content: "f066";


}


. fa-plus:before {


Content: "f067";


}


. fa-minus:before {


Content: "f068";


}


. fa-asterisk:before {


Content: "f069";


}


. fa-exclamation-circle:before {


Content: "f06a";


}


. fa-gift:before {


Content: "f06b";


}


. fa-leaf:before {


Content: "F06C";


}


. fa-fire:before {


Content: "F06D";


}


. fa-eye:before {


Content: "f06e";


}


. fa-eye-slash:before {


Content: "f070";


}


. Fa-warning:before,


. fa-exclamation-triangle:before {


Content: "f071";


}


. fa-plane:before {


Content: "f072";


}


. fa-calendar:before {


Content: "f073";


}


. fa-random:before {


Content: "f074";


}


. fa-comment:before {


Content: "f075";


}


. fa-magnet:before {


Content: "f076";


}


. fa-chevron-up:before {


Content: "f077";


}


. fa-chevron-down:before {


Content: "f078";


}


. fa-retweet:before {


Content: "f079";


}


. fa-shopping-cart:before {


Content: "f07a";


}


. fa-folder:before {


Content: "f07b";


}


. fa-folder-open:before {


Content: "f07c";


}


. fa-arrows-v:before {


Content: "f07d";


}


. fa-arrows-h:before {


Content: "f07e";


}


. fa-bar-chart-o:before {


Content: "f080";


}


. fa-twitter-square:before {


Content: "f081";


}


. fa-facebook-square:before {


Content: "f082";


}


. fa-camera-retro:before {


Content: "f083";


}


. fa-key:before {


Content: "f084";


}


. Fa-gears:before,


. fa-cogs:before {


Content: "f085";


}


. fa-comments:before {


Content: "f086";


}


. fa-thumbs-o-up:before {


Content: "f087";


}


. fa-thumbs-o-down:before {


Content: "f088";


}


. fa-star-half:before {


Content: "f089";


}


. fa-heart-o:before {


Content: "f08a";


}


. fa-sign-out:before {


Content: "f08b";


}


. fa-linkedin-square:before {


Content: "f08c";


}


. fa-thumb-tack:before {


Content: "f08d";


}


. fa-external-link:before {


Content: "f08e";


}


. fa-sign-in:before {


Content: "f090";


}


. fa-trophy:before {


Content: "f091";


}


. fa-github-square:before {


Content: "f092";


}


. fa-upload:before {


Content: "f093";


}


. fa-lemon-o:before {


Content: "f094";


}


. fa-phone:before {


Content: "f095";


}


. fa-square-o:before {


Content: "f096";


}


. fa-bookmark-o:before {


Content: "f097";


}


. fa-phone-square:before {


Content: "f098";


}


. fa-twitter:before {


Content: "f099";


}


. fa-facebook:before {


Content: "F09A";


}


. fa-github:before {


Content: "f09b";


}


. fa-unlock:before {


Content: "f09c";


}


. fa-credit-card:before {


Content: "f09d";


}


. fa-rss:before {


Content: "f09e";


}


. fa-hdd-o:before {


Content: "F0A0";


}


. fa-bullhorn:before {


Content: "F0A1";


}


. fa-bell:before {


Content: "F0F3";


}


. fa-certificate:before {


Content: "F0A3";


}


. fa-hand-o-right:before {


Content: "F0A4";


}


. fa-hand-o-left:before {


Content: "F0a5";


}


. fa-hand-o-up:before {


Content: "F0a6";


}


. fa-hand-o-down:before {


Content: "F0a7";


}


. fa-arrow-circle-left:before {


Content: "F0a8";


}


. fa-arrow-circle-right:before {


Content: "F0A9";


}


. fa-arrow-circle-up:before {


Content: "F0AA";


}


. fa-arrow-circle-down:before {


Content: "F0ab";


}


. fa-globe:before {


Content: "F0AC";


}


. fa-wrench:before {


Content: "F0AD";


}


. fa-tasks:before {


Content: "F0ae";


}


. fa-filter:before {


Content: "F0b0";


}


. fa-briefcase:before {


Content: "F0B1";


}


. fa-arrows-alt:before {


Content: "F0B2";


}


. Fa-group:before,


. fa-users:before {


Content: "F0C0";


}


. Fa-chain:before,


. fa-link:before {


Content: "F0C1";


}


. fa-cloud:before {


Content: "F0C2";


}


. fa-flask:before {


Content: "F0C3";


}


. Fa-cut:before,


. fa-scissors:before {


Content: "F0C4";


}


. Fa-copy:before,


. fa-files-o:before {


Content: "F0C5";


}


. fa-paperclip:before {


Content: "F0c6";


}


. Fa-save:before,


. fa-floppy-o:before {


Content: "F0c7";


}


. fa-square:before {


Content: "F0c8";


}


. fa-bars:before {


Content: "F0C9";


}


. fa-list-ul:before {


Content: "F0CA";


}


. fa-list-ol:before {


Content: "F0CB";


}


. fa-strikethrough:before {


Content: "f0cc";


}


. fa-underline:before {


Content: "F0CD";


}


. fa-table:before {


Content: "F0CE";


}


. fa-magic:before {


Content: "F0d0";


}


. fa-truck:before {


Content: "F0d1";


}


. fa-pinterest:before {


Content: "F0d2";


}


. fa-pinterest-square:before {


Content: "F0d3";


}


. fa-google-plus-square:before {


Content: "F0d4";


}


. fa-google-plus:before {


Content: "F0d5";


}


. fa-money:before {


Content: "F0d6";


}


. fa-caret-down:before {


Content: "F0d7";


}


. fa-caret-up:before {


Content: "F0d8";


}


. fa-caret-left:before {


Content: "F0D9";


}


. fa-caret-right:before {


Content: "F0da";


}


. fa-columns:before {


Content: "f0db";


}


. Fa-unsorted:before,


. fa-sort:before {


Content: "F0DC";


}


. Fa-sort-down:before,


. fa-sort-asc:before {


Content: "F0DD";


}


. Fa-sort-up:before,


. fa-sort-desc:before {


Content: "F0DE";


}


. fa-envelope:before {


Content: "F0e0";


}


. fa-linkedin:before {


Content: "F0e1";


}


. Fa-rotate-left:before,


. fa-undo:before {


Content: "F0e2";


}


. Fa-legal:before,


. fa-gavel:before {


Content: "F0e3";


}


. Fa-dashboard:before,


. fa-tachometer:before {


Content: "F0e4";


}


. fa-comment-o:before {


Content: "F0e5";


}


. fa-comments-o:before {


Content: "F0e6";


}


. Fa-flash:before,


. fa-bolt:before {


Content: "F0e7";


}


. fa-sitemap:before {


Content: "F0e8";


}


. fa-umbrella:before {


Content: "F0e9";


}


. Fa-paste:before,


. fa-clipboard:before {


Content: "F0ea";


}


. fa-lightbulb-o:before {


Content: "F0eb";


}


. fa-exchange:before {


Content: "F0ec";


}


. fa-cloud-download:before {


Content: "F0ed";


}


. fa-cloud-upload:before {


Content: "F0ee";


}


. fa-user-md:before {


Content: "F0F0";


}


. fa-stethoscope:before {


Content: "F0F1";


}


. fa-suitcase:before {


Content: "F0f2";


}


. fa-bell-o:before {


Content: "F0A2";


}


. fa-coffee:before {


Content: "F0f4";


}


. fa-cutlery:before {


Content: "F0f5";


}


. fa-file-text-o:before {


Content: "F0f6";


}


. fa-building-o:before {


Content: "F0f7";


}


. fa-hospital-o:before {


Content: "F0f8";


}


. fa-ambulance:before {


Content: "F0f9";


}


. fa-medkit:before {


Content: "F0FA";


}


. fa-fighter-jet:before {


Content: "F0FB";


}


. fa-beer:before {


Content: "F0FC";


}


. fa-h-square:before {


Content: "F0FD";


}


. fa-plus-square:before {


Content: "F0fe";


}


. fa-angle-double-left:before {


Content: "F100";


}


. fa-angle-double-right:before {


Content: "F101";


}


. fa-angle-double-up:before {


Content: "f102";


}


. fa-angle-double-down:before {


Content: "f103";


}


. fa-angle-left:before {


Content: "f104";


}


. fa-angle-right:before {


Content: "F105";


}


. fa-angle-up:before {


Content: "f106";


}


. fa-angle-down:before {


Content: "f107";


}


. fa-desktop:before {


Content: "f108";


}


. fa-laptop:before {


Content: "f109";


}


. fa-tablet:before {


Content: "F10A";


}


. Fa-mobile-phone:before,


. fa-mobile:before {


Content: "F10B";


}


. fa-circle-o:before {


Content: "F10C";


}


. fa-quote-left:before {


Content: "f10d";


}


. fa-quote-right:before {


Content: "f10e";


}


. fa-spinner:before {


Content: "F110";


}


. fa-circle:before {


Content: "f111";


}


. Fa-mail-reply:before,


. fa-reply:before {


Content: "f112";


}


. fa-github-alt:before {


Content: "f113";


}


. fa-folder-o:before {


Content: "f114";


}


. fa-folder-open-o:before {


Content: "f115";


}


. fa-smile-o:before {


Content: "f118";


}


. fa-frown-o:before {


Content: "f119";


}


. fa-meh-o:before {


Content: "f11a";


}


. fa-gamepad:before {


Content: "F11B";


}


. fa-keyboard-o:before {


Content: "F11C";


}


. fa-flag-o:before {


Content: "f11d";


}


. fa-flag-checkered:before {


Content: "f11e";


}


. fa-terminal:before {


Content: "F120";


}


. fa-code:before {


Content: "f121";


}


. fa-reply-all:before {


Content: "f122";


}


. fa-mail-reply-all:before {


Content: "f122";


}


. Fa-star-half-empty:before,


. Fa-star-half-full:before,


. fa-star-half-o:before {


Content: "F123";


}


. fa-location-arrow:before {


Content: "f124";


}


. fa-crop:before {


Content: "f125";


}


. fa-code-fork:before {


Content: "f126";


}


. Fa-unlink:before,


. fa-chain-broken:before {


Content: "f127";


}


. fa-question:before {


Content: "f128";


}


. fa-info:before {


Content: "f129";


}


. fa-exclamation:before {


Content: "F12A";


}


. fa-superscript:before {


Content: "f12b";


}


. fa-subscript:before {


Content: "F12C";


}


. fa-eraser:before {


Content: "f12d";


}


. fa-puzzle-piece:before {


Content: "f12e";


}


. fa-microphone:before {


Content: "f130";


}


. fa-microphone-slash:before {


Content: "f131";


}


. fa-shield:before {


Content: "f132";


}


. fa-calendar-o:before {


Content: "f133";


}


. fa-fire-extinguisher:before {


Content: "f134";


}


. fa-rocket:before {


Content: "F135";


}


. fa-maxcdn:before {


Content: "f136";


}


. fa-chevron-circle-left:before {


Content: "f137";


}


. fa-chevron-circle-right:before {


Content: "f138";


}


. fa-chevron-circle-up:before {


Content: "f139";


}


. fa-chevron-circle-down:before {


Content: "F13A";


}


. fa-html5:before {


Content: "f13b";


}


. fa-css3:before {


Content: "f13c";


}


. fa-anchor:before {


Content: "f13d";


}


. fa-unlock-alt:before {


Content: "f13e";


}


. fa-bullseye:before {


Content: "f140";


}


. fa-ellipsis-h:before {


Content: "f141";


}


. fa-ellipsis-v:before {


Content: "f142";


}


. fa-rss-square:before {


Content: "f143";


}


. fa-play-circle:before {


Content: "f144";


}


. fa-ticket:before {


Content: "f145";


}


. fa-minus-square:before {


Content: "f146";


}


. fa-minus-square-o:before {


Content: "f147";


}


. fa-level-up:before {


Content: "f148";


}


. fa-level-down:before {


Content: "f149";


}


. fa-check-square:before {


Content: "f14a";


}


. fa-pencil-square:before {


Content: "f14b";


}


. fa-external-link-square:before {


Content: "f14c";


}


. fa-share-square:before {


Content: "f14d";


}


. fa-compass:before {


Content: "F14E";


}


. Fa-toggle-down:before,


. fa-caret-square-o-down:before {


Content: "F150";


}


. Fa-toggle-up:before,


. fa-caret-square-o-up:before {


Content: "f151";


}


. Fa-toggle-right:before,


. fa-caret-square-o-right:before {


Content: "f152";


}


. Fa-euro:before,


. fa-eur:before {


Content: "f153";


}


. fa-gbp:before {


Content: "f154";


}


. Fa-dollar:before,


. fa-usd:before {


Content: "f155";


}


. Fa-rupee:before,


. fa-inr:before {


Content: "f156";


}


. Fa-cny:before,


. Fa-rmb:before,


. Fa-yen:before,


. fa-jpy:before {


Content: "f157";


}


. Fa-ruble:before,


. Fa-rouble:before,


. fa-rub:before {


Content: "f158";


}


. Fa-won:before,


. fa-krw:before {


Content: "f159";


}


. Fa-bitcoin:before,


. fa-btc:before {


Content: "F15A";


}


. fa-file:before {


Content: "f15b";


}


. fa-file-text:before {


Content: "f15c";


}


. fa-sort-alpha-asc:before {


Content: "F15d";


}


. fa-sort-alpha-desc:before {


Content: "F15E";


}


. fa-sort-amount-asc:before {


Content: "f160";


}


. fa-sort-amount-desc:before {


Content: "f161";


}


. fa-sort-numeric-asc:before {


Content: "f162";


}


. fa-sort-numeric-desc:before {


Content: "f163";


}


. fa-thumbs-up:before {


Content: "f164";


}


. fa-thumbs-down:before {


Content: "f165";


}


. fa-youtube-square:before {


Content: "f166";


}


. fa-youtube:before {


Content: "f167";


}


. fa-xing:before {


Content: "f168";


}


. fa-xing-square:before {


Content: "f169";


}


. fa-youtube-play:before {


Content: "F16A";


}


. fa-dropbox:before {


Content: "f16b";


}


. fa-stack-overflow:before {


Content: "f16c";


}


. fa-instagram:before {


Content: "f16d";


}


. fa-flickr:before {


Content: "f16e";


}


. fa-adn:before {


Content: "f170";


}


. fa-bitbucket:before {


Content: "f171";


}


. fa-bitbucket-square:before {


Content: "f172";


}


. fa-tumblr:before {


Content: "f173";


}


. fa-tumblr-square:before {


Content: "f174";


}


. fa-long-arrow-down:before {


Content: "f175";


}


. fa-long-arrow-up:before {


Content: "f176";


}


. fa-long-arrow-left:before {


Content: "f177";


}


. fa-long-arrow-right:before {


Content: "f178";


}


. fa-apple:before {


Content: "f179";


}


. fa-windows:before {


Content: "f17a";


}


. fa-android:before {


Content: "f17b";


}


. fa-linux:before {


Content: "f17c";


}


. fa-dribbble:before {


Content: "f17d";


}


. fa-skype:before {


Content: "f17e";


}


. fa-foursquare:before {


Content: "f180";


}


. fa-trello:before {


Content: "f181";


}


. fa-female:before {


Content: "f182";


}


. fa-male:before {


Content: "f183";


}


. fa-gittip:before {


Content: "f184";


}


. fa-sun-o:before {


Content: "f185";


}


. fa-moon-o:before {


Content: "f186";


}


. fa-archive:before {


Content: "f187";


}


. fa-bug:before {


Content: "f188";


}


. fa-vk:before {


Content: "f189";


}


. fa-weibo:before {


Content: "f18a";


}


. fa-renren:before {


Content: "f18b";


}


. fa-pagelines:before {


Content: "f18c";


}


. fa-stack-exchange:before {


Content: "f18d";


}


. fa-arrow-circle-o-right:before {


Content: "f18e";


}


. fa-arrow-circle-o-left:before {


Content: "f190";


}


. Fa-toggle-left:before,


. fa-caret-square-o-left:before {


Content: "f191";


}


. fa-dot-circle-o:before {


Content: "f192";


}


. fa-wheelchair:before {


Content: "f193";


}


. fa-vimeo-square:before {


Content: "f194";


}


. Fa-turkish-lira:before,


. fa-try:before {


Content: "f195";


}


. fa-plus-square-o:before {


Content: "f196";


}


CSS file

Body {
Background: #ccc;
Background-repeat:repeat;
Text-align:center;
Display:block;
Font-family:sans-serif;
}

*{


margin:0;padding:0;


Box-sizing:border-box;


-webkit-box-sizing:border-box;


-moz-box-sizing:border-box;


-webkit-transition:all 0.3s ease-in;


-moz-transition:all 0.3s ease-in;


Transition:all 0.3s ease-in;


}


. title H1 {


Position:absolute;


Top: -100px;


Text-align:center;


font-size:12px;


}


. title H2 {


Position:absolute;


Top: -200px;


Text-align:center;


font-size:8px;


}


Header {


width:62%;


height:80px;


Background:rgba (0, 255, 0, 0.3);


margin-top:25px;


}


. contact_details {


Display:block;


Float:right;


width:60%;


Background:rgba (0, 0, 0, 0.2);


padding:10px 2% 10px 0;


margin-top:40px;


}


. bcard {


Border:solid 1px #999;


border-bottom:2px solid #999;


Background:rgba (255, 255, 255, 0.5);


Margin-top: -110px;


Position:absolute;


Display:inline-block;


width:400px;


height:220px;


top:50%;


Margin-left: -200px;


-webkit-box-shadow:3px 3px 3px 3px rgba (0, 0, 0, 0.3);


box-shadow:3px 3px 3px 3px rgba (0, 0, 0, 0.3);


border-top:0;


Overflow:hidden;


}


. bcard:hover > Header {


margin-left:-260px;


}


. bcard:hover > Contact_details {


margin-right:-260px;


}


. bcard:hover > Footer {


top:150px;


}


. bcard:hover > Footer a {


font-size:36px;


}


. bcard:hover > Title H1 {


top:24px;


font-size:24px;


}


. bcard:hover > Title H2 {


top:66px;


font-size:14px;


}


H1, H2 {


Float:left;


width:90%;


Text-align:left;


margin:15px 5% 0 5%;


font-size:24px;


font-weight:400;


Color: #333;


text-shadow:1px 1px 1px #FFFFFF;


}


H2 {


font-size:14px;


margin-top:3px;


Color: #444;


}


. border-top {


Float:left;


Border-top:solid 3px;


margin:0;


}


. gray1 {


Border-color: #f00;


width:15%;


}


. gray2 {


Border-color: #0f9;


width:23%;


}


. gray3 {


Border-color: #000;


width:62%;


}


p {


Text-align:right;


margin:0;


font-weight:100;


Color: #444;


font-size:13px;


text-shadow:1px 1px 1px #FFFFFF;


}


. Mail {


margin-top:0;


}


A


Text-decoration:none;


text-shadow:1px 1px 1px #FFFFFF;


Color: #444;


}


Footer {


Position:absolute;


width:80%;


Text-align:center;


Margin:0 10%;


Display:block;


top:250px;


}


Footer a {


bottom:0;


margin:0 Auto;


Float:left;


Text-align:center;


Display:block;


font-size:10px;


width:20%;


}


. fa-google-plus-square:hover {


Color: #D34836;


}


. fa-linkedin-square:hover {


Color: #007BB6;


}


. fa-twitter-square:hover {


Color: #4099FF;


}


. fa-facebook-square:hover {


Color: #3B5998;


}


. fa-envelope:hover {


Color: #000;


}

HTML code
<div class= "Bcard"
<div class= "Border-top gray1" ></DIV>
<div class= " Border-top gray2 "></div>
<div class=" Border-top gray3 "></DIV>
<div class=" title ">
    </div>
    </ Header>
<div class= "contact_details"
 <p>
187xxxxxxxx
 </p>
 <p class= "Mail"
<a href= "mailto:admin@yongyuan.us" >ADMIN@YONGYUAN.US</A>
  </p>

</div>
<footer>
 <a href= "><i class= fa fa-google-plus-square" ></i> </a>
 <a href= "" ><i class= "fa fa-twitter-square" ></I></A>
 <a href= "" title= "Follow me on Facebook" ><i class= "fa fa-facebook-square" ></I></A>
 <a href= "" title= "View my LinkedIn profile" ><i class= "fa fa-linkedin-square" ></I></A>
  <a href= "" title= "Send me an e-mail" ><i class= "fa fa-envelope" ></I></A>
</footer>
 </div>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.