前端开发者| 后端与前端开发的区别 |
| web和前端开发的区别吗 |
| web前端设计与开发的区别 |
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>circle 扭动</title>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
}
.circle-wrap {
position: relative;
float: left;
margin-left: 20px;
width: 210px;
height: 210px;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.circle-wrap .circle-shut {
width: 210px;
height: 210px;
border: 10px solid #000;
border-right-color: red;
border-bottom-color: red;
border-radius: 50%;
box-sizing: border-box;
transition: all 0.8s ease-in-out;
}
.circle-wrap .circle-img {
position: absolute;
top: 10px;
left: 10px;
width: 190px;
height: 190px;
z-index: -1;
border-radius: 50%;
box-sizing: border-box;
}
.circle-wrap .circle-img img {
max-width: 100%;
}
.circle-wrap .circle-details {
position: absolute;
top: 10px;
left: 10px;
width: 190px;
height: 190px;
z-index: 2;
box-sizing: border-box;
background-color: #000;
opacity: 0;
transition: opacity 1s ease-in-out;
border-radius: 50%;
}
.circle-wrap .circle-details-main {
position: absolute;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: 700;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.circle-wrap:hover .circle-shut {
transform: rotate(90deg);
}
.circle-wrap:hover .circle-details {
opacity: 0.5;
}
.circle-wrap:hover .circle-details-main {
opacity: 1;
}
</style>
</head>
<body>
<div class=”circle-wrap”>
<div class=”circle-shut”></div>
<div class=”circle-img”>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190548ay41myypw4yz3m11.jpg”
/>
</div>
<div class=”circle-details”></div>
<div class=”circle-details-main”>我是一个描述</div>
</div>
<div class=”circle-wrap”>
<div class=”circle-shut”></div>
<div class=”circle-img”>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190548f29l67mx782c8m8q.jpg”
/>
</div>
<div class=”circle-details”></div>
<div class=”circle-details-main”>我是一个描述</div>
</div>
<div class=”circle-wrap”>
<div class=”circle-shut”></div>
<div class=”circle-img”>
<img
src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190555iw5e7zttk7557wi4.jpg”
/>
</div>
<div class=”circle-details”></div>
<div class=”circle-details-main”>我是一个描述</div>
</div>
</body>
</html>
| 前端开发与后台的区别 |
| 前端开发和美工的区别 |
| 手游开发前端和后端的区别 |
» 本文来自：前端开发者 » 《前端开发分享一种交互效果》
» 本文链接地址：https://www.rokub.com/7027.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册