CSS3绚丽旋转动画效果

原创 2017年01月02日 22:14:33

CSS3绚丽旋转动画效果


transform:rotate(90deg)    (旋转一定角度)
transform:scale(2)    (缩放倍数)
transition:2s    (从一个样式变为另一个的时间,要加在原始样式上)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    .mainDiv{
		width:100px;
		height:100px;
		margin:100px auto;
		text-align: center;
		line-height: 100px;
		font-weight: bold;
		color:#ddd;
		background:#ddd;
		border:1px solid #ddd;
		-webkit-transform:rotate(0deg) scale(1);
		-moz-transform:rotate(0deg) scale(1);
		transform:rotate(0deg) scale(1);
		-webkit-transition:2s;
		-moz-transition:2s;
		transition:2s;
		
	}
	.mainDiv:hover{
	   color:black;       
       background-color:red;
       -webkit-transform:rotate(720deg) scale(2);
       -moz-transform:rotate(720deg) scale(2);
       transform:rotate(720deg) scale(2);
	}
</style>
<title>css3特效</title>
</head>
<body>
<div class="mainDiv">您好</div>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)

CSS3 常用四个动画(旋转、放大、旋转放大、移动)在页面设计中,给一些图标或者图片加上一些动画效果,会给人非常舒服的感觉。这里收集了四个常用动画效果,以便不时之需。转载原文效果一:360°旋转 修改...
  • FungLeo
  • FungLeo
  • 2015年11月15日 14:24
  • 16162

CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transit...

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

27个精致的CSS3动画效果

  • 2017年08月23日 09:08
  • 62.53MB
  • 下载

纯CSS3画出小黄人并实现动画效果

正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也是不一样的。但是其实最大的不同是,用一个形象一点的例子就是:这是两个孩子,第一...
  • yeana1
  • yeana1
  • 2016年07月09日 15:38
  • 2468

好玩的css3动画效果

  • 2017年08月22日 00:33
  • 6KB
  • 下载

css3动画效果

  • 2017年03月13日 16:33
  • 15KB
  • 下载

详解用CSS3制作圆形滚动进度条动画效果

今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢,那篇博客只是制作出来效...

css3,js实现加载动画效果

  • 2014年10月14日 15:28
  • 3KB
  • 下载

8款CSS3鼠标滑过图片动画效果

  • 2017年10月31日 11:25
  • 185KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3绚丽旋转动画效果
举报原因:
原因补充:

(最多只允许输入30个字)