css大风车(四叶草)

2018-10-11 本文已影响0人两年半练习程序员

效果图走一波

有些卡顿,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

css大风车(四叶草)

猜你喜欢

热点阅读