CSS3实现兴趣图谱效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现兴趣图谱效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>CSS3实现兴趣图谱效果</title>
    <link href="css/zzsc.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.q').hover(function () { $(this).parent().addClass('divcon'); $(this).parent().find('a').css({ '-webkit-transform': 'scale(1.2)', '-webkit-transition-duration': '.5s' }) }, function () { $(this).parent().removeClass('divcon'); $(this).parent().find('a').css({ '-webkit-transform': 'scale(1)', '-webkit-transition-duration': '.5s' }) });
            $('.divc a').hover(function () { $(this).parent().addClass('divcon'); $(this).css({ '-webkit-transform': 'scale(1.2)', '-webkit-transition-duration': '.5s' }) }, function () { $(this).parent().removeClass('divcon'); $(this).css({ '-webkit-transform': 'scale(1)', '-webkit-transition-duration': '.5s' }) });
        })
    </script>
</head>
<body>

    <div class="box_163css">
        <div class="divc div01">
            <a href="#" target="_blank">CSS3</a><span class="q">?</span><div class="line"></div>
        </div>
        <div class="divc div02">
            <a href="#" target="_blank">HTML5</a><span class="q">?</span><div class="line"></div>
        </div>
        <div class="divc div03">
            <a href="#" target="_blank">JQUERY</a><span class="q">?</span><div class="line"></div>
        </div>
        <div class="divc div04">
            <a href="#" target="_blank">JS</a><span class="q">?</span><div class="line"></div>
        </div>
        <div class="indiv">
            特效
        </div>
    </div>
</body>
</html>

CSS代码(zzsc.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
body{width:100%;}
.box_163css{width:400px;height:400px;margin:20px auto;position:relative;}
h3{width:100%;height:50px;}
.indiv{background:url(../images/main.png) no-repeat;position:absolute;left:150px;top:150px;width:100px;height:103px;color:#fff;text-align:center;line-height:95px;font-size:22px;}
.divc{position:absolute;}
.divc a{text-decoration:none;color:#f32770;display:block;background:#fff;position:relative;z-index:12;cursor:pointer;line-height:72px;width:72px;height:72px;border:1px solid #f43c7e;border-radius:50px;}
.div01{left:0;top:150px;}
.q{position:absolute;z-index:2;background:url(../images/q.gif) no-repeat 3px 3px;text-indent:-999em;width:23px;height:23px;cursor:pointer;}
.q:hover{background:url(../images/qh.gif) no-repeat;}
.divcon .line{border-top:1px solid #7dd7f3;}
.divcon .q{background:url(../images/qh.gif) no-repeat;}
.div01 .q{left:115px;top:30px;}
.div02 .q{left:29px;top:115px;}
.div03 .q{left:-65px;top:30px;}
.div04 .q{left:25px;top:-65px;}
.div02{left:160px;top:0;}
.div03{right:0;top:150px;}
.div04{left:170px;bottom:0;}
.line{width:80px;border-top:1px solid #ebf9ff;position:absolute;}
.div01 .line{left:73px;top:40px;}
.div02 .line{left:0px;top:110px;-webkit-transform:rotate(90deg)}
.div03 .line{left:-80px;top:40px;}
.div04 .line{left:-4px;top:-40px;-webkit-transform:rotate(90deg)}

附件:下载该文件资源,减少时间成本(增值服务)