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

作者:Tigh     发布于「网站源码」 - 猫雅博客

2017-03-05 分类:网站源码 阅读(131) 评论(1) 百度已收录
当前位置:猫雅博客 > 网站相关 > 网站源码 > 正文
赞(0) 打赏

作者:Tigh

站长QQ1165500646

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

听说过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

评论 1

5 + 4 =
  1. #1

    可以可以。

    勿扰 CHINA 1年前 (2018-05-16)回复
分享4种CSS3效果:旋转、旋转放大、放大、移动

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

这绝对不是广告!

灌水说明

由于评论过多,垃圾评论日益严重,决定开始封禁不正常评论,我分享资源不欠谁,所以对于抱着敷衍不正常的评论者,很抱歉啦,本站不对你开放。

封禁列表
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册