您的位置：首页 > Web前端 > CSS

css旋转实例

2016-07-15 17:28 281 查看

原理：元素规定旋转的时间、效果（快慢）

元素Hover规定旋转完成后是个什么样子（转了多少度，宽延长到多长）

两个关键字：transition、transform，只用到了hover

div{transition:2s linear} //在两秒内，相近的速度旋转

div:hover{transform:rotate(360deg);} //旋转个360度

*以上规定旋转时，也可分开写transition:2s; transition-timing-function:linear。很简单就这两个地方要注意。

带动画效果的翻转

1.旋转的关闭按钮

img{width:50px;height:50px;display:block;-webkit-transition:0.4s linear;transition:0.4s ease-in;}
img:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
<a href="#" target="_blank"><img src="stop.png"></a>

2.箭头上下

div{ width:100px; height:50px; background:url("jt.png") no-repeat center; background-size:50px; transition:0.4s;}
div:hover{transform:rotate(180deg);}
<a href="#"><div></div></a>
*和上一个一样，只是度数少了180度

3.箭头划过飞上移开飞下

多了一步控制背景，原理是用background-position控制图片的显示，再加上transition的动画效果

div{ height:50px; width:100px;background:url("images/nav_arrow.png") no-repeat right 16px; transition:0.5s}  /*距上面16px*/
div:hover{ background-position:right -34px;}
<div></div>

4.进度条

利用css3的transition:width 2s实现

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>进度条</title>
<style>
.container{ position:relative; }
.front,.back{ position:absolute; top: 0px;}
.back{ width: 200px; height:20px; background:#ddd;}
.front{ width:0px; height:20px; background:lightblue; -moz-transition:width 2s;}
.submit{padding-top:30px;}
</style>
</head>
<body>
<div class="container">
<div id="back" class="back"></div>
<div id="front" class="front"></div>
</div>
<div class="submit">
<input type="submit" value="提交" onclick="submit();"/>
</div>
</body>
</html>
<script type="text/javascript">
function submit(){
document.getElementsByClassName("front")[0].style.width = "200px";
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css旋转 transform transition

相关文章推荐

新的分享

章节导航