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{
    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;
}

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>

时间： 2024-10-12 13:12:14

CSS3画腾讯QQ图标无图片和js参考的相关文章

仿腾讯QQ拍照背景图片滑动获取图片

1.首先我们来看一下效果图片 2.再看一下项目结构 3.里面注释很多我就不仔细讲了,大家仔细看吧首先是MainActivity: public class MainActivity extends Activity { private ClipImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCont

解决由腾讯qq浏览器引起win10系统桌面图标不停的闪烁问题

win10系统桌面图标不停的闪烁,虽然不会引起太大问题,但是看着实在郁闷在网上搜索了很久,像停止问题报告服务,重置为默认应用都无解,了解到大概是软件兼容性问题于是打开服务管理器,一个一个关闭不是微软的服务,当关闭QQ浏览器的是,图标不闪烁了 QQ浏览器论问题描述如下:微软为了推广自家的Edge,刚升级的时候把默认浏览器改成了Edge. 而QQ浏览器默认设置的是"锁定QQ浏览器为默认浏览器"现在问题来了,Edge和QQ浏览器打架了.Edge设置自己为默认,关联一次,图标刷新一次.QQ浏览

腾讯系这4个功能，让微信QQ免费存储文件图片，不用亏了

前几年的云盘接二连三的倒闭事件,毕生难忘,一些云盘平台看似有庞然大物般的背景,实则,是没有一则公告倒闭不了的!实在是怕了怕了! 不能一棍子打死全部,至少,某度盘依然坚挺!但是,今天要讲的是,腾讯系相当于小云盘的4大功能. 第一个,微信收藏这个功能几乎没有人不知道,但是手机上是看不了这微信收藏有多少容量的,PC版可以看到,2G,非常方便存储一下链接,照片和一些重要的信息! 第二个,QQ邮箱存储,这个就厉害了,理论上是无限存储的,几乎空间无限大,但是,重点来了,只能永久存不超过50M的附件,所以,

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

S01-晓亮的电脑软件安装过程文档腾讯QQ 595076941 2019年10月

S01-晓亮的电脑软件安装过程文档腾讯QQ 595076941 2019年10月本文档的创建作者的腾讯QQ聊天号码是 595076941 S02-电脑软件安装过程中不要随意关闭窗口除非必需关闭窗口否则请不要关闭任何窗口 S03-建议文档用docx格式.表格用xlsx格式自动化脚本用ahk格式少用jpg图片格式 S04-用FastCopy复制原有磁盘中的文档表格图片和数据库文件到固态U盘 S05-从固态U盘启动电脑到杏雨梨云USB维护系统对本地磁盘重新分区整个磁盘分两个区,C盘100GB S

腾讯QQ空间穿越时光轴3D特效

<DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style> *{margin:0;padding:0;} body{ background-image:url("images/bg.png") fixed;//拖动鼠标图片不会上下移动 height:2000px; } .con{ width:1000px; /*heigth:500px;*/

[转载]网站性能优化之CSS无图片技术 —— 网站性能优化

一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术.二.为什么要“无图片”?首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多.当然单纯拿这两个来比,还不能说明什么.下面我们通过计算来说下CS

基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能

基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能腾讯QQ移动客户端(新版)的QQ群有一项功能比较有趣,是关于QQ群的.QQ群新增一项功能开放给具有管理权限的群成员:管理群 -> 群数据中,会看到QQ群的一些基础数据统计报表,如人数.发言条数的统计报表,如图: 我之前写了一篇文章是关于Android平台上的一个统计报表的开源框架MPAndroidChart,文章介绍了如何在自己的项目中使用MPAndroidChart制作统计报表,同时给出了基本折线图的一

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

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

CSS3画腾讯QQ图标 无图片和js参考的相关文章

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

CSS3画腾讯QQ图标无图片和js参考的相关文章