科技助力经济发展

© 2024  TMTforum
首页 声音 项目 正文

CSS3实现超酷社会化分享效果

作者：TMTForum 时间：2012-07-23 0
css3

越来越多项目使用CSS3特性了，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。今天分享一个社会化分享按钮的CSS3实现的超酷效果。

效果预览：http://90-designer.com/demo/share/

CSS部分：

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background-image:url(“../images/texture.gif”); font-family:”HelveticaNeue-Light”,”Helvetica Neue Light”,”Helvetica Neue”,Arial,Tahoma,Verdana,sans-serif; font-size:13px; }
h3 { clear:both; padding:20px; text-align:center; }
a { color:#AF7F00; text-decoration:underline; }
a:hover { text-decoration:none; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* SOCIAL ICONS – GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url(“../images/delicious.png”); }
li.digg { background-image:url(“../images/digg.png”); }
li.facebook { background-image:url(“../images/facebook.png”); }
li.flickr { background-image:url(“../images/flickr.png”); }
li.linkedin { background-image:url(“../images/linkedin.png”); }
li.reddit { background-image:url(“../images/reddit.png”); }
li.rss { background-image:url(“../images/rss.png”); }
li.twitter { background-image:url(“../images/twitter.png”); }

/* SOCIAL ICONS – CSS3 */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

 

HTML部分：





CSS3实现超酷分享效果




CSS3实现超酷分享效果






打包下载：点击下载


社会化分享按钮的CSS3实现的超酷效果。 效果预览：http://90-designer.com/demo/share/ CSS部分： /* BASIC RESET */ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;} /* HTML ELEMENTS */ body { background-image:url(“../images/texture.gif”); font-family:”HelveticaNeue-Light”,”Helvetica Neue Light”,”Helvetica Neue”,Arial,Tahoma,Verdana,sans-serif; font-size:13px; } h3 { clear:both; padding:20px; text-align:center; } a { color:#AF7F00; text-decoration:underline; } a:hover { text-decoration:none; } /* COMMON CLASSES */ .break { clear:both; } /* WRAPPER */ #wrapper { width:800px; margin:40px auto; } /* SOCIAL ICONS – GENERAL */ .social { list-style:none; margin:30px auto; width:464px; } .social li { display:inline; float:left; background-repeat:no-repeat; } .social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } .social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } li.delicious { background-image:url(“../images/delicious.png”); } li.digg { background-image:url(“../images/digg.png”); } li.facebook { background-image:url(“../images/facebook.png”); } li.flickr { background-image:url(“../images/flickr.png”); } li.linkedin { background-image:url(“../images/linkedin.png”); } li.reddit { background-image:url(“../images/reddit.png”); } li.rss { background-image:url(“../images/rss.png”); } li.twitter { background-image:url(“../images/twitter.png”); } /* SOCIAL ICONS – CSS3 */ #css3:hover li { opacity:0.2; } #css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #css3 li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #css3 li:hover { opacity:1; } #css3 li:hover a strong { opacity:1; top:-10px; }   HTML部分：

CSS3实现超酷分享效果

打包下载：点击下载 '}" class="bdshare_t bds_tools_32 get-codes-bdshare">

TAG：

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2024  钛锋网  TMTForum.com