html+css3+jquery实现悬浮标签动画

2025-11-05 04:57:48

1、新建html文档。

2、书写hmtl代码。

html+css3+jquery实现悬浮标签动画

<ul>

<li><a target="_blank" href="#">百度不知道</a></li>

</ul>

</canvas>

</div>

</body>

html+css3+jquery实现悬浮标签动画

3、书写css代码。

<style>

* { margin: 0; padding: 0; }

#container { }

#footer { position: relative; height: 70px; clear: both; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

body { background: #2a2b2d; font: 13px/1.3 'Microsoft Yahei', '宋体'; color: #999; }

#page, #footer_inner { margin: 0 auto; width: 960px; }

h1#logo { overflow: hidden; height: 93px; padding: 25px 0; }

h1#logo a { display: block; height: 93px; }

#container { margin: 0 auto; padding: 40px 0 0; }

#container h2 { font-weight: normal; line-height: 28px; }

#container p { padding: 10px 0; }

.credit { text-align: center; padding: 20px 0 100px; font-size: 10px; }

a, a:visited { text-decoration: none; outline: none; color: #97cae6; }

a:hover { text-decoration: underline; }

#footer { background-color: #212121; width: 100%; }

#footer h2 { font-size: 18px; font-weight: normal; height: 70px; line-height: 70px; font-family: "Microsoft Yahei"; color: #eee; }

#footer_inner { position: relative; }

#footer a.tzine, a.tzine:visited { color: #FCFCFC; font-size: 12px; line-height: 70px; position: absolute; top: 0; right: 0; width: 90px; }

</style>

html+css3+jquery实现悬浮标签动画

4、添加并引用js。添加到head标签里面。

$(document).ready(function() {

if( ! $('#myCanvas').tagcanvas({

textColour : '#ffffff',

outlineThickness : 1,

maxSpeed : 0.03,

depth : 0.75

})) {

$('#myCanvasContainer').hide();

}

});

</script>

html+css3+jquery实现悬浮标签动画

5、代码整体结构

html+css3+jquery实现悬浮标签动画

6、查看效果

html+css3+jquery实现悬浮标签动画

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。