分享4种CSS3效果:旋转、旋转放大、放大、移动

请在后台-主题设置-文章页设置-添加左边栏模块

听说过CSS3的强大,也见识过,但一直没有仔细研究它,其实CSS这种东东算是最入门级的代码玩具了,CSS3相比过去只是新增了许多新的东东,今天我们就来看看CSS3特有的4种动态效果。需要注意的是:请不要试图在IE9版本以下的IE浏览器中看到任何效果,而Chrome、Firefox这类浏览器就比较给力,它们对CSS3毫无压力。

 
<a href='http://www.ee0.cc'>返回主页</a> <a href='/web/?'></a>
<hr>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>4种CSS3效果:旋转、旋转放大、放大、移动</title>
<style>
.a{
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
	width:200px;
	height:200px;
	background-color:#000000;
	display:block;
	margin:100px auto;
	color:#fff;
	text-align:center;
	line-height:200px;
	font-size:20px;
	font-weight:bold;
}
.a:hover {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}
.a1{
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
	width:200px;
	height:200px;
	background-color:#000000;
	display:block;
	margin:100px auto;
	color:#fff;
		text-align:center;
	line-height:200px;
	font-size:20px;
	font-weight:bold;
}
.a1:hover {
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);
}
.a2{
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
	width:200px;
	height:200px;
	background-color:#000000;
	display:block;
	margin:100px auto;
	color:#fff;
		text-align:center;
	line-height:200px;
	font-size:20px;
	font-weight:bold;
}
.a2:hover {
	transform:rotate(360deg) scale(1.2);
	-webkit-transform:rotate(360deg) scale(1.2);
	-moz-transform:rotate(360deg) scale(1.2);
	-o-transform:rotate(360deg) scale(1.2);
	-ms-transform:rotate(360deg) scale(1.2);
}
.a3{
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
	width:200px;
	height:200px;
	background-color:#000000;
	display:block;
	margin:100px auto;
	color:#fff;
		text-align:center;
	line-height:200px;
	font-size:20px;
	font-weight:bold;
}
.a3:hover {
	transform:translate(0,-10px);
	-webkit-transform:translate(0,-10px);
	-moz-transform:translate(0,-10px);
	-o-transform:translate(0,-10px);
	-ms-transform:translate(0,-10px);
}
</style>
</head>
<body>
<a class="a">360度旋转</a>
<a class="a1">放大效果</a>
<a class="a2">旋转放大</a>
<a class="a3">上下移动</a>
</body>
</html>

 
 

未经允许不得转载:作者:tigh, 转载或复制请以 超链接形式 并注明出处 猫雅博客
原文地址:《分享4种CSS3效果:旋转、旋转放大、放大、移动》 发布于2017-03-05

分享到:
赞(0) 生成海报

评论 1

评论前必须登录!

  注册

  1. #1

    可以可以。

    勿扰2年前 (2018-05-16)

长按图片转发给朋友

博客进行重整
由于现实繁忙博客已几个月没管理,最近由于疫情在家所以打算重整博客,在此也希望大家注意身体不要去人多的地方,不要感染了病毒了。
切换注册

登录

忘记密码 ?

切换登录

注册