|
|
|
 网站知识 |
|
旋转的四叶草div+css
|
|
[ 来源：青州易达网络科技有限公司 发布日期：2019-4-9 14:44:58 ]
|
|
.
|
|
旋转的四叶草效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
*{margin: 0;padding: 0;}
html,body{display: flex;width: 100%;height: 100%;background: #ccc;align-items: center;}
.cloverBox{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0; margin: auto;
width: 400px;
height: 400px;
transform: rotate(0deg);
}
.clover{
width: 50%;
height: 50%;
float: left;
transition: all 10s;
cursor: pointer;
}
.c1{background: #A82125;border-radius: 0 50% 0 50%;}
.c1:hover {transform:translateX(20px);transform:rotate(360deg);}
.c2{background: #DFD03E;border-radius: 50% 0 50% 0;}
.c3{background: #88DD3E;border-radius: 50% 0 50% 0;}
.c4{background: #1EA8D7;border-radius: 0 50% 0 50%;}
</style>
<div class="cloverBox">
<div class="clover c1"></div>
<div class="clover c2"></div>
<div class="clover c3"></div>
<div class="clover c4"></div>
</div>
</body>
</html>
本页路径：http://www.sdfirstsolar.com/web-knowledge/797.html,您觉得这篇文章怎么样,觉得好转载吧或者加个QQ、微信相互交流下。
|
|
|
