首页 / JAVASCRIPT / CSS3画腾讯QQ图标无图片和js参考

CSS3画腾讯QQ图标无图片和js参考

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3画腾讯QQ图标无图片和js参考，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含18152字，纯文字阅读大概需要26分钟。

内容图文

css代码：

                body {
    font: 12px Tahoma,arial,sans-serif;
    margin: 0;
    padding: 0;
}
#mask {
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
}
header {
    color: #666;
    font-family: ‘Segoe UI Light‘,‘Segoe UI‘,‘Microsoft Jhenghei‘,‘微软雅黑‘,sans-serif;
    font-size: 50px;
    margin-top: 50px;
    text-align: center;
}
.con {
    display: block;
    height: 400px;
    margin: 30px auto 0;
    position: relative;
    width: 840px;
}

#qq,#qqnv{
    display: block;
    height: 400px;
   float:left;
    position: relative;
    width: 420px;
}
.headflower {
    background: none repeat scroll 0 0 ;
    /*border: 1px solid #fb0009;*//*border-radius: 117px / 117px 117px 68px 68px;*/    
    position: absolute;
    top: -20px; 
    left: 210px;
    width: 108px;  height: 65px; 
    z-index: 100;
}
.hdj1 {
    background: none repeat scroll 0 0 #FF59A1;
    border: 1px solid #000;   
    border-top-left-radius:80%;
    border-top-right-radius:50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius:50%;
    width:30px;
    height:45px;
    position:absolute;
    left:0px;top:0px;
    transform: rotate(-50deg);
    transform-origin:      50% 50% 0;
     z-index:10;
}
.hdj2 {
    background: none repeat scroll 0 0 #FF59A1;
    border: 1px solid #000;   
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:80% 30px;
    border-bottom-right-radius:10px;
    width:30px;
    height:45px;
    position:absolute;
    left:10px;top:0px;
    transform: rotate(60deg);
    transform-origin: -30% 50% 0;
     z-index:10;
}
.hdj3 {
    background: none repeat scroll 0 0 #FF59A1;
    border: 1px solid #000;   
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius:50%;
    width:30px;
    height:45px;
    position:absolute;
    left:50px;top:0px;
    transform: rotate(50deg);
    transform-origin: 50% 50% 0;
    z-index:10;
}
.hdj4 {
    background: none repeat scroll 0 0 #FF59A1;
    border: 1px solid #000;   
    border-top-left-radius:50%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius:50%;
    width:30px;
    height:45px;
    position:absolute;
    left:50px;top:20px;
    transform: rotate(100deg);
    transform-origin: 50% 50% 0;
    z-index:10;
}
.hdj{
    background: none repeat scroll 0 0 #FF59A1;
    border: 1px solid #000;
    /*border-radius: 117px / 117px 117px 68px 68px;*/
    border-top-left-radius:80% 33px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px 33px;
    border-bottom-right-radius:10px;
    width:25px;
    height:30px;
    position:absolute;
    left:30px;top:15px;
     z-index:100;
}
.head {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #000;
    border-radius: 117px / 117px 117px 68px 68px;
    height: 185px;
    left: 96px;
    position: absolute;
    top: 18px;
    width: 234px;
    z-index: 10;
}
.eye {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #000;
    border-radius: 50%;
    height: 66px;
    position: absolute;
    width: 44px;
}
/*女qq*/
.eyenv {
     /*background: none repeat scroll 0 0 #fff;*/
    background: -moz-linear-gradient(left center , #FF59A1, white 50%, #FF59A1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #000;
    border-radius: 50%;
    height: 66px;
    position: absolute;
    width: 44px;
}
.eye2{
    background: none repeat scroll 0 0 #fff;   
    border-radius: 50%;
    height: 55px;
    position: absolute;  left: 0;  bottom: 0;
    width: 44px;
}
.left.eye {
    left: 62px;
    top: 50px;
}
.right.eye {
    left: 123px;
    top: 50px;
}
/*女qq*/
.left.eyenv {
    left: 62px;
    top: 50px;
}
.right.eyenv {
    left: 123px;
    top: 50px;
}
.innerLeftEye {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #000;
    border-radius: 50%;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 18px;
}
.innerLeftEyenv {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #000;
    border-radius: 50%;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 10px;
    width: 18px;
}
.innerLeftEye:after,.innerLeftEyenv:after {
    background: none repeat scroll 0 0 white;
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 9px;
    position: absolute;
    top: 6px;
    width: 6px;
    z-index: 11;
}
.innerRightEye {
    background: none repeat scroll 0 0 black;
    border-radius: 50% / 90% 90% 10% 10%;
    box-shadow: 0 -1px 2px black;
    height: 20px;
    left: 8px;
    position: absolute;
    top: 20px;
    width: 18px;
}
.innerRightEyenv {
    background: none repeat scroll 0 0 black;
    border-radius: 50% / 90% 90% 10% 10%;
    box-shadow: 0 -1px 2px black;
    height: 20px;
    left: 8px;
    position: absolute;
    top: 10px;
    width: 18px;
}
.innerRightEye:after,.innerRightEyenv:after {
    background: none repeat scroll 0 0 white;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 35% 80%;
    bottom: -1px;
    content: "";
    height: 13px;
    left: 4px;
    position: absolute;
    width: 10px;
}
.fix {
    background: none repeat scroll 0 0 black;
    border-radius: 50%;
    height: 4px;
    position: absolute;
    top: 17px;
    width: 4px;
}
.fix:after {
    background: none repeat scroll 0 0 black;
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 14px;
    position: absolute;
    top: 0;
    width: 4px;
}
.mouthTopContainer {
    height: 29px;
    left: 39px;
    overflow: hidden;
    position: absolute;
    top: 120px;
    width: 158px;
    z-index: 1;
}
.mouthTop {
    background: none repeat scroll 0 0 #ffa600;
    border: 1px solid #ffa600;
    border-top-left-radius: 45% 34px;
    border-top-right-radius: 45% 34px;
    height: 34px;
    left: 0;
    position: absolute;
    top: 0;
    width: 158px;
    z-index: 1;
}
.mouthBottomContainer {
    height: 15px;
    left: 39px;
    overflow: hidden;
    position: absolute;
    top: 146px;
    width: 158px;
    z-index: 1;
}
.mouthBottom {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #ffa600;
    border-bottom-left-radius: 45% 24px;
    border-bottom-right-radius: 45% 24px;
    border-color: -moz-use-text-color #ffa600 #ffa600;
    border-image: none;
    border-right: 1px solid #ffa600;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    height: 24px;
    left: 0;
    position: absolute;
    top: -4px;
    width: 158px;
    z-index: 1;
}
.lips {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #ffa600;
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    border-color: -moz-use-text-color #ffa600 #ffa600;
    border-image: none;
    border-right: 1px solid #ffa600;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    height: 24px;
    left: 60px;
    position: absolute;
    top: 146px;
    width: 116px;
}
.lipShadow {
    border-bottom: 20px solid transparent;
    border-right: 8px solid black;
    border-top: 20px solid transparent;
    height: 0;
    left: -12px;
    position: absolute;
    top: 4px;
    transform: rotate(-60deg);
    transform-origin: right top 0;
    width: 0;
    z-index: 2;
}
.lipShadow.right {
    left: 114px;
    transform: rotate(60deg) rotateY(180deg);
}
.body {
    height: 300px;
    left: 48px;
    position: absolute;
    top: 135px;
    width: 326px;
}
.scarf {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #fb0009;
    border-color: -moz-use-text-color #000 #000;
    border-image: none;
    border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;
    border-right: 4px solid #000;
    border-style: none solid solid;
    border-width: medium 4px 4px;
    height: 110px;
    left: 34px;
    position: absolute;
    top: -2px;
    width: 258px;
    z-index: 5;
}
.scarfnv {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FF59A1;
    border-color: -moz-use-text-color #000 #000;
    border-image: none;
    border-radius: 30px 38px 50% 50% / 34px 34px 76px 76px;
    border-right: 4px solid #000;
    border-style: none solid solid;
    border-width: medium 4px 4px;
    height: 110px;
    left: 34px;
    position: absolute;
    top: -2px;
    width: 258px;
    z-index: 5;
}
.scarfShadow {
    border-top: 6px solid #000;
    border-top-left-radius: 90px 120px;
    border-top-right-radius: 30px;
    height: 70px;
    left: 6px;
    position: absolute;
    top: 0;
    transform: rotate(-79deg);
    width: 60px;
}
.scarfShadowRight {
    border-bottom-right-radius: 70px;
    border-right: 6px solid black;
    height: 70px;
    left: 143px;
    position: absolute;
    top: 8px;
    width: 100px;
    z-index: 6;
}
.scarfEnd {
    background: none repeat scroll 0 0 #fb0009;
    border: 3px solid black;
    border-bottom-left-radius: 50% 43%;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 20% 57%;
    height: 64px;
    left: 74px;
    position: absolute;
    top: 90px;
    width: 52px;
    z-index: 4;
}
.scarfnvEnd {
    background: none repeat scroll 0 0 #FF59A1;
    border: 3px solid black;
    border-bottom-left-radius: 50% 43%;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 20% 57%;
    height: 64px;
    left: 74px;
    position: absolute;
    top: 90px;
    width: 52px;
    z-index: 4;
}
.scarfEndShadow {
    border-top: 6px solid black;
    border-top-left-radius: 30px;
    height: 20px;
    left: 12px;
    position: absolute;
    top: 6px;
    transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
    transform-origin: right top 0;
    width: 20px;
    z-index: 10;
}
.innerWrapper {
    height: 200px;
    left: 30px;
    overflow: hidden;
    position: absolute;
    top: 76px;
    width: 280px;
}
.inner {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #000;
    border-radius: 50%;
    height: 210px;
    left: 25px;
    position: absolute;
    top: -71px;
    width: 218px;
    z-index: 4;
}
.outterWrapper {
    height: 250px;
    left: 32px;
    overflow: hidden;
    position: absolute;
    top: 54px;
    width: 262px;
}
.outter {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #000;
    border-radius: 125px;
    height: 250px;
    position: absolute;
    top: -84px;
    width: 260px;
    z-index: 3;
}
.handWrapper {
    left: 7px;
    position: absolute;
    top: 219px;
}
.leftHandTopContainer {
    height: 26px;
    left: 50px;
    overflow: hidden;
    position: absolute;
    top: 55px;
    transform: rotate(-70deg);
    transform-origin: left bottom 0;
    width: 118px;
    z-index: 1;
}
.leftHandTop {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #050346;
    border-top-left-radius: 44% 38px;
    border-top-right-radius: 56% 33px;
    height: 54px;
    position: absolute;
    width: 128px;
}
.leftHandBottomContainer {
    height: 30px;
    left: 50px;
    overflow: hidden;
    position: absolute;
    top: 78px;
    transform: rotate(-70deg);
    transform-origin: left top 0;
    width: 100px;
    z-index: 1;
}
.leftHandBottom {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #000;
    border-bottom-left-radius: 48% 20px;
    border-bottom-right-radius: 52% 23px;
    border-color: -moz-use-text-color #050346 #050346;
    border-image: none;
    border-right: 1px solid #050346;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    height: 44px;
    position: absolute;
    top: -26px;
    width: 128px;
}
.rightHandTopContainer {
    height: 34px;
    left: 240px;
    overflow: hidden;
    position: absolute;
    top: 47px;
    transform: rotate(65deg);
    transform-origin: right bottom 0;
    width: 118px;
    z-index: 3;
}
.rightHandTop {
    background: none repeat scroll 0 0 black;
    border: 1px solid #050346;
    border-top-left-radius: 59% 48px;
    border-top-right-radius: 41% 54px;
    height: 54px;
    left: -30px;
    position: absolute;
    transform: rotateY(-180deg);
    width: 148px;
}
.rightHandBottomContainer {
    height: 58px;
    left: 248px;
    overflow: hidden;
    position: absolute;
    top: 81px;
    transform: rotate(90deg);
    transform-origin: right top 0;
    width: 110px;
    z-index: 1;
}
.rightHandBottom {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 black;
    border-bottom-right-radius: 100% 40px;
    border-color: -moz-use-text-color #000 #000;
    border-image: none;
    border-right: 1px solid #000;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    height: 28px;
    left: 38px;
    position: absolute;
    top: 1px;
    width: 68px;
    z-index: 999;
}
.footWrapper {
    left: 80px;
    position: absolute;
    top: 292px;
}
.leftFootTopWrapper {
    height: 37px;
    left: -1px;
    overflow: hidden;
    position: absolute;
    top: 16px;
    width: 130px;
    z-index: 2;
}
.leftFootTop {
    background: none repeat scroll 0 0 #ff9c00;
    border: 4px solid black;
    border-top-left-radius: 80% 70%;
    height: 60px;
    left: 3px;
    position: absolute;
    top: -10px;
    width: 120px;
}
.toe {
    border-top: 4px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    height: 20px;
    left: 2px;
    position: absolute;
    top: 50px;
    transform: rotate(-45deg);
    transform-origin: left top 0;
    width: 25px;
    z-index: 10;
}
.toe.right {
    left: 264px;
    transform: rotate(45deg) rotateY(180deg);
}
.leftFootBottomWrapper {
    height: 38px;
    left: -1px;
    overflow: hidden;
    position: absolute;
    top: 52px;
    width: 130px;
    z-index: 2;
}
.leftFootBottom {
    background: none repeat scroll 0 0 #ff9c00;
    border: 4px solid #000;
    border-radius: 50% / 44% 44% 56% 56%;
    height: 60px;
    left: 3px;
    position: absolute;
    top: -30px;
    width: 120px;
}
.rightFootTopWrapper {
    height: 36px;
    left: 134px;
    overflow: hidden;
    position: absolute;
    top: 22px;
    width: 134px;
    z-index: 2;
}
.rightFootTop {
    background: none repeat scroll 0 0 #ff9c00;
    border: 4px solid black;
    border-top-right-radius: 32% 65%;
    height: 60px;
    left: 4px;
    position: absolute;
    top: 0;
    width: 120px;
}
.rightFootBottomWrapper {
    height: 38px;
    left: 134px;
    overflow: hidden;
    position: absolute;
    top: 52px;
    width: 134px;
}
.rightFootBottom {
    background: none repeat scroll 0 0 #ff9c00;
    border: 4px solid #000;
    border-radius: 50% / 56% 56% 44% 44%;
    height: 60px;
    left: 3px;
    position: absolute;
    top: -30px;
    width: 120px;
}
.rightToe {
    background: none repeat scroll 0 0 #ff9c00;
    border: 2px solid #000;
    border-radius: 50%;
    height: 10px;
    left: 210px;
    position: absolute;
    top: 35px;
    transform: rotate(34deg);
    transform-origin: right bottom 0;
    width: 40px;
    z-index: 1;
}

View Code

html代码：

                <!
                DOCTYPE html
                >
                <
                html
                >
                <
                head
                >
                <
                meta 
                charset
                ="utf-8"
                />
                <
                link 
                href
                ="index.css"
                 rel
                ="stylesheet"
                />
                <
                title
                >CSS3 Tencent Tencent QQ </title></head><body><header> CSS3 Tencent QQ 测试-火狐31.0 </header><div class="con"><a id="qq"><div class=‘head‘><div class=‘left eye‘><div class="innerLeftEye"></div></div><div class=‘right eye‘><div class="innerRightEye"><div class="fix"></div></div></div><div class=‘mouthTopContainer‘><div class=‘mouthTop‘></div></div><div class="mouthBottomContainer"><div class="mouthBottom"></div></div><div class="lipsContainer"><div class="lips"><div class="lipShadow left"></div><div class="lipShadow right"></div></div></div></div><div class="body"><div class="innerWrapper"><div class="inner"></div></div><div class="outterWrapper"><div class=‘outter‘></div></div><div class="scarf"><div class="scarfShadow"></div><div class="scarfShadowRight"></div></div><div class="scarfEnd"><div class="scarfEndShadow"></div></div></div><div class="handWrapper"><div class="leftHandTopContainer"><div class="leftHandTop"></div></div><div class="leftHandBottomContainer"><div class="leftHandBottom"></div></div><div class="rightHandTopContainer"><div class="rightHandTop"></div></div><div class="rightHandBottomContainer"><div class="rightHandBottom"></div></div></div><div class=‘footWrapper‘><div class="leftFootTopWrapper"><div class="leftFootTop"></div></div><div class="leftFootBottomWrapper"><div class="leftFootBottom"></div></div><div class=‘toe left‘></div><div class="rightFootTopWrapper"><div class="rightFootTop"></div></div><div class="rightFootBottomWrapper"><div class="rightFootBottom"></div></div><div class=‘toe right‘></div></div></a><a id="qqnv"><div class="headflower"><div class="hdj1"></div><div class="hdj2"></div><div class="hdj"></div><div class="hdj3"></div><div class="hdj4"></div></div><div class=‘head‘><div class=‘left eyenv‘><div class="eye2"><div class="innerLeftEyenv"></div></div></div><div class=‘right eyenv‘><div class="eye2"><div class="innerRightEyenv"><div class="fix"></div></div></div></div><div class=‘mouthTopContainer‘><div class=‘mouthTop‘></div></div><div class="mouthBottomContainer"><div class="mouthBottom"></div></div><div class="lipsContainer"><div class="lips"><div class="lipShadow left"></div><div class="lipShadow right"></div></div></div></div><div class="body"><div class="innerWrapper"><div class="inner"></div></div><div class="outterWrapper"><div class=‘outter‘></div></div><div class="scarfnv"><div class="scarfShadow"></div><div class="scarfShadowRight"></div></div><div class="scarfnvEnd"><div class="scarfEndShadow"></div></div></div><div class="handWrapper"><div class="leftHandTopContainer"><div class="leftHandTop"></div></div><div class="leftHandBottomContainer"><div class="leftHandBottom"></div></div><div class="rightHandTopContainer"><div class="rightHandTop"></div></div><div class="rightHandBottomContainer"><div class="rightHandBottom"></div></div></div><div class=‘footWrapper‘><div class="leftFootTopWrapper"><div class="leftFootTop"></div></div><div class="leftFootBottomWrapper"><div class="leftFootBottom"></div></div><div class=‘toe left‘></div><div class="rightFootTopWrapper"><div class="rightFootTop"></div></div><div class="rightFootBottomWrapper"><div class="rightFootBottom"></div></div><div class=‘toe right‘></div></div></a></div></body></html>

View Code

原文：http://www.cnblogs.com/DemoLee/p/3973208.html

内容总结

以上是互联网集市为您收集整理的CSS3画腾讯QQ图标无图片和js参考全部内容，希望文章能够帮你解决CSS3画腾讯QQ图标无图片和js参考所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1093719.html

来源：【匿名】

【上一篇】LoadRunner12_脚本中运行JavaScript 【下一篇】javascript 怎么调用php方法

更多 ►

【CSS3画腾讯QQ图标无图片和js参考】教程文章相关的互联网学习教程文章

CSS3画腾讯QQ图标无图片和js参考【代码】【图】

css代码：body {font: 12px Tahoma,arial,sans-serif;margin: 0;padding: 0; } #mask {left: 0;opacity: 0.2;position: absolute;top: 0; } header {color: #666;font-family: ‘Segoe UI Light‘,‘Segoe UI‘,‘Microsoft Jhenghei‘,‘微软雅黑‘,sans-serif;font-size: 50px;margin-top: 50px;text-align: center; } .con {display: block;height: 400px;margin: 30px auto 0;position: relative;width: 840px; }#qq,#qqnv{dis...

原生JS+ CSS3创建loading加载动画；【代码】【图】

效果图： js创建loadingshow = function(){//loading dom元素var Div = document.createElement("div");Div.setAttribute("class","ui-loading");var chidDiv = document.createElement("div");chidDiv.setAttribute("class","ui-loading-mask")Div.appendChild(chidDiv)document.body.appendChild(Div) }取消loading加载hide= function(){var Div = document.getElementsByClassName("ui-loading");while(Div[0].hasChildNodes())...

收藏（CSS3登入表单，包含JS验证）【代码】【图】

1、HTML结构<div id="home"><form id="login" class="current1" method="post"> <h3>用户登入</h3><img class="avator" src="images/avatar.png" width="96" height="96"/><label>邮箱/名称<input type="text" name="name" style="width:215px;" /><span>邮箱为空</span></label><label>密码<input type="password" name="pass" /><span>密码为空</span></label><button type="button">登入</button> </form> ...

web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）【代码】

1、强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>2、iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；<meta content="yes" name="apple-mobile-web-app-capable" />3、iphone的私有标签，它指定的iphone中safari顶端的状态条...

js和css3怎么旋转缩放

js和css3结合做缩放，效果直接复制下面代码运行看把，注意导jq包咯::::::::::::::::::::::::::::::::::::::::::::::::::::::::::<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="divs"> 555 </div> </body> <script> var times = setInterval(‘...

50个强大璀璨的CSS3/JS技术运用实例【图】

50例强大璀璨的CSS3/JS 技术运用。CSS3来了。虽然支持的浏览器很有限，但许多设计师都在实验它的强大功能。本文可以让你了解css3的新技术和功能。 Visual Effects and Layout Techniques With CSS3 CSS3 Analogue ClockAnalogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time. Use CSS3 to Create a Dynamic Stack of Index CardsWe will create a dynamic stac...

CSS3+Js实现响应式导航条方法【图】

本文介绍CSS3+Js实现响应式导航条方法今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑...

javascript – 使用供应商特定的CSS3前缀加载性能和DOM

我现在已经好奇了一会儿. css3属性尚未标准化,但可以通过浏览器使用特定浏览器的前缀来实现.例如,可以使用border-radius,它可以在现代浏览器上正常工作.但是,对于以前版本的浏览器供应商,我们可以使用特定于供应商的属性,如-moz,-webkit等前缀来工作. 现在,对于我的页面,我使用了渐变和border-radius,制作了几个使用它们的类并将这些类应用于. 以下哪项更好？ >使用javascript查找支持是否存在,如果支持属性,则使用属性,如果上面为...

哪位高手有不用的书了卖给小弟我吧php、javascript、c++、ajax应用、html5、css3、mysql等【图】

谁有不用的书了卖给我吧php、javascript、c++、ajax应用、html5、css3、mysql等自己半路出家，都是自学，也不系统。前端后台都会一点儿，套程序倒是会，二次开发就有点儿难度了，所以想从基础学起，多了也没空学，只学php相关的知道网上教程很多，但是整体看电脑累眼，所以还是想看些纸质书求购php、javascript、c++、ajax应用、html5、css3、mysql数据库图书，网站制作类的其他书籍有了也可以推荐给我，div+cs类的不要，ps不要。a...

css3-我是做PHP的，为什么我现在看<java从入门到精通>这本书暂时毫无压力，为什么看《javascript》权威指南感觉很吃力呢？

我是做PHP的，为什么我现在看这本书暂时毫无压力，为什么看《javascript》权威指南感觉很吃力呢？个人感觉基于对象的javascript 比纯面对对象的java难度要大得多啊回复内容：我是做PHP的，为什么我现在看这本书暂时毫无压力，为什么看《javascript》权威指南感觉很吃力呢？个人感觉基于对象的javascript 比纯面对对象的java难度要大得多啊JS与前两者差别较大的估计是：面向对象、模块化、作用域，特别是面向对象，用了特别奇特的构...

JavaScript如何判断浏览器对CSS3属性是否支持

这篇文章主要介绍了关于JavaScript如何判断浏览器对CSS3属性是否支持，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下其实在使用css3的一些属性时，为了兼顾低端浏览器对CSS3的不友好性，往往需要知道某些浏览器是否支持要使用的CSS3属性，以此来做向下适配。比如常见的CSS3动画就很有必要检测浏览器是否支持。下面本文就分享了几种方法，有需要的朋友们可以参考借鉴。前言CSS3的出现让浏览器的表现更加的丰富多彩...

js和css3实现旋转效果【图】

本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值，下面一起来看下吧我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧下面呢我先放上我的css代码,代码很简单:.one{ width:200px; height: 200px; border:1px solid #adadad; transition:all 0.1s; border-radius:50%; background:url(images/1.jpg) no-repeat center cent...

如何用JS和CSS3制作炫酷的弹窗效果【图】

本文给大家分享使用js和css3制作的炫酷弹窗效果，整个背景模糊，要比纯色加透明度高大上好多。对js弹窗效果感兴趣的朋友一起学习吧昨天在家看电视时，退出的时候发现了一个弹窗效果，整个背景模糊，觉得这样的效果好炫，要比纯色加透明度高大上好多，连续试了几个界面，最终确定效果由css实现的，于是今天一大早来到公司便赶紧搜索了一下，虽然兼容性奇差，但是一个css属性就可以搞定。瞬间感觉自己知道的真是太少了~~ 首先回...

在javascript+css3中如何实现打气球小游戏【图】

这是一个简单但是印象深刻的小游戏，打气球小游戏的实现代码，主要基于js和css3，基于css3画气球，具体实现代码大家参考下本文效果知识点：css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，CSS3新增样式等。css代码如下：<style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:...

如何使用JS+CSS3实现图片响应鼠标移动放大缩小【图】

这次给大家带来如何使用JS+CSS3实现图片响应鼠标移动放大缩小，使用JS+CSS3实现图片响应鼠标移动放大缩小的注意事项有哪些，下面就是实战案例，一起来看一下。今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。方法一：使用js和css3效果如图：这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：<!DOCTYPE ht...

首页 / JAVASCRIPT / CSS3画腾讯QQ图标 无图片和js参考

CSS3画腾讯QQ图标 无图片和js参考

内容导读

内容图文

内容总结

内容备注

内容手机端

【CSS3画腾讯QQ图标 无图片和js参考】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程

首页 / JAVASCRIPT / CSS3画腾讯QQ图标无图片和js参考

CSS3画腾讯QQ图标无图片和js参考

【CSS3画腾讯QQ图标无图片和js参考】教程文章相关的互联网学习教程文章