效果图走一波
有些卡顿,gif没录制好
布局
结构非常简单,四块叶子
<body>
<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>
class='cloverBox'为叶子容器
clover为叶子共有属性
c1,c2,c3,c4为叶子私有属性
<style>
*{margin: 0;padding: 0;}
html,body{display: flex;width: 100%;height: 100%;background: #f7f7f7;align-items: center;}
.cloverBox{
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 400px;
transform: rotate(0deg);
}
.clover{
width: 50%;
height: 50%;
float: left;
transition: all .6s;
cursor: pointer;
}
.c1{background: #A82125;border-radius: 0 50% 0 50%;}
.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>
border-radius属性用于创建圆角,对应的值为border-radius: 左上角 右上角 右下角 左下角;
一个静态的布局就完成了
{ISBJCHZ@_CCGQG5R0@W_7T.png
如何让他动起来的,并且鼠标悬浮转动停止,被选中的叶子缩小呢
给叶子容器cloverBox类添加动画属性animation
.cloverBox{
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 400px;
transform: rotate(0deg);
/* 动画属性 */
animation: round 10s linear infinite forwards;
}
animation: round 10s linear infinite forwards;
round绑定到选择器的 keyframe 名称
10s执行动画所需要的时间
linear动画从头到尾的速度是相同的(默认的话动画以低速开始，然后加快，在结束前变慢)
infinite规定动画应该无限次播放
forwards将动画属性应用在元素上
属性设置完毕,接下来实现执行的动画效果@keyframes
主要是实现元素的旋转角度从0~360transform: rotate(0deg)
@keyframes round{
from{
transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
在这里我没有设置各浏览器的兼容,如需要!自行添加
已经可以旋转,接下如何实现鼠标悬浮转动停止呢
主要用到了animation-play-state: paused|running;
animation-play-state 属性规定动画正在运行还是暂停paused 规定动画已暂停,running规定动画正在播放。
所以我们在鼠标hover叶子容器cloverBox的时候暂停动画
.cloverBox:hover{
animation-play-state:paused
}
鼠标hover叶子clover的时候被选中的叶子缩小transform:scale(x,y) 定义 2D 缩放转换。
.clover:hover{
transform: scale(0.9);
}
所需要实现的效果已经完成,完整代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Cc">
<title>四叶草</title>
</head>
<style>
*{margin: 0;padding: 0;}
html,body{display: flex;width: 100%;height: 100%;background: #f7f7f7;align-items: center;}
.cloverBox{
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 400px;
transform: rotate(0deg);
/* 动画属性 */
animation: round 10s linear infinite forwards;
}
.cloverBox:hover{
animation-play-state:paused
}
@keyframes round{
from{
transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
.clover{
width: 50%;
height: 50%;
float: left;
transition: all .6s;
cursor: pointer;
}
.clover:hover{
transform: scale(0.9);
}
.c1{background: #A82125;border-radius: 0 50% 0 50%;}
.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>
<body>
<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>
点赞.jpg
