效果圖走一波
布局
結(jié)構(gòu)非常簡單,四塊葉子
<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屬性用于創(chuàng)建圓角,對應(yīng)的值為border-radius: 左上角 右上角 右下角 左下角;
一個靜態(tài)的布局就完成了
如何讓他動起來的,并且鼠標(biāo)懸浮轉(zhuǎn)動停止,被選中的葉子縮小呢
給葉子容器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執(zhí)行動畫所需要的時間
linear動畫從頭到尾的速度是相同的(默認(rèn)的話動畫以低速開始，然后加快，在結(jié)束前變慢)
infinite規(guī)定動畫應(yīng)該無限次播放
forwards將動畫屬性應(yīng)用在元素上
屬性設(shè)置完畢,接下來實(shí)現(xiàn)執(zhí)行的動畫效果@keyframes
主要是實(shí)現(xiàn)元素的旋轉(zhuǎn)角度從0~360transform: rotate(0deg)
@keyframes round{
from{
transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
在這里我沒有設(shè)置各瀏覽器的兼容,如需要!自行添加
已經(jīng)可以旋轉(zhuǎn),接下如何實(shí)現(xiàn)鼠標(biāo)懸浮轉(zhuǎn)動停止呢
主要用到了animation-play-state: paused|running;
animation-play-state 屬性規(guī)定動畫正在運(yùn)行還是暫停paused 規(guī)定動畫已暫停,running規(guī)定動畫正在播放。
所以我們在鼠標(biāo)hover葉子容器cloverBox的時候暫停動畫
.cloverBox:hover{
animation-play-state:paused
}
鼠標(biāo)hover葉子clover的時候被選中的葉子縮小transform:scale(x,y) 定義 2D 縮放轉(zhuǎn)換。
.clover:hover{
transform: scale(0.9);
}
所需要實(shí)現(xiàn)的效果已經(jīng)完成,完整代碼如下
<!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>
