懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

CSS3 技术实现美观的标签云效果

发表日期:2014-10-09文章编辑:仙桃云科网络科技有限公司



标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题。在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性。

效果演示      源码下载

HTML代码:
<div class="wrapper" style="margin-top:200px"> <a href="#" class="tag">high resolution</a> <a href="#" class="tag">icons</a> <a href="#" class="tag">layer styles</a> <a href="#" class="tag">layout</a> <a href="#" class="tag">letterpress</a> <a href="#" class="tag">magazine</a> <a href="#" class="tag">menu</a> <a href="#" class="tag">metal</a> <a href="#" class="tag">navigation</a> <a href="#" class="tag">paper</a> <a href="#" class="tag">pattern</a> <a href="#" class="tag">plastic</a> <a href="#" class="tag">ribbon</a> <a href="#" class="tag">seamless</a> <a href="#" class="tag">simple</a> </div> <div style="position:absolute;height:90px;width:100%;left:0;bottom:0"><div class="footer-banner" style="width:728px; margin:0px auto"></div></div> <script src="http://www.yyyweb.com/demo/common/jquery.min.js"></script> <script src="http://www.yyyweb.com/demo/common/init.js"></script>

css代码:

<link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
	<style>
	.top-banner {
		background-color: #666;
	}
	</style>
	<!--HTML5 Shiv-->
	<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->



 

 

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17