css旋转实例

最新推荐文章于 2024-07-26 09:56:47 发布

CodingAlarm

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量2.7k

点赞数 1

分类专栏： web前端文章标签： css旋转 transform transition

本文链接：https://blog.csdn.net/CodingAlarm/article/details/51919674

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

原理：元素规定旋转的时间、效果（快慢）
元素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>