码迷,mamicode.com
首页 > 其他好文 > 详细

未完成的开锁动画演示

时间:2016-09-11 20:11:16      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开锁动画</title>
<style type="text/css">
.yuan{
border-radius: 200px;
background-color: aqua;
height: 300px;
width: 300px;
margin: 500px;
border-top: 10px solid red;
border-bottom: 10px solid blue;
border-right: 10px solid blue;
border-left: 10px solid red;
color: white;
font-size: 30px;
transition: all 2s;

position: relative;

}
.yuan:hover{
transform: rotate(180deg);
}

.suo{
height: 200px;
width: 150px;
}
.kaisuo{
position: absolute;
top: 580px;
left: 590px;
}
.kaisuo:hover{
opacity: 0.1;
}
</style>
</head>
<body>
<div class="yuan">
</div>
<div class="kaisuo">
<img src="../images/suozi.png" class="suo">
</div>
</body>
</html>
效果:鼠标移入边框会旋转180°,图片会虚化,但是现在两者只能选择一种显示,用了个DIV把图片定位到BORDER里的,如果不用的话,图片会和边框一起旋转。
  值得改动的地方还有很多,希望在深入学习的过程中能慢慢完善

未完成的开锁动画演示

标签:

原文地址:http://www.cnblogs.com/xuyang1995/p/5862533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!