css大风车(四叶草)

效果图走一波

有些卡顿,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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 打卡日期:2018年03月30打卡累计天数:26/30 #宣言(我和妈妈一起努力践行。相信自己行比自己行更重要〉 ...
    牛牛简书阅读 178评论 0 0
  • 小时候学习《卖火柴的小女孩》这篇文章时只是觉得小女孩太可怜了,没有人爱她,在万家灯火的圣诞夜她却独自一个人在街头卖...
    Aliyachit阅读 3,563评论 0 2
  • *本篇无对女性怀有不敬的思想,只是借述论述。 日常生活中,只要讲到“小说”这个词,大多数的人所能联想到的是一些...
    渡芥阅读 915评论 1 3