专栏首页AlbertYang的编程之路送你一朵小红花,CSS实现旋转的小红花

送你一朵小红花,CSS实现旋转的小红花

视频已同步到我的B站账号,欢迎大家点击阅读原文关注我的B站账号。

送你一朵小红花,愿你勇敢的面对生活中的苦难,不要放弃爱与希望,蓝天白云,定会如期而至。

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>送你一朵小红花:公众号AlbertYang</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 容器 -->
    <div class="box">
        <!-- 花朵 -->
        <div class="flower">
            <!-- 花瓣 -->
            <div class="petal" style="--x:0"></div>
            <div class="petal" style="--x:1"></div>
            <div class="petal" style="--x:2"></div>
            <div class="petal" style="--x:3"></div>
            <div class="petal" style="--x:4"></div>
            <div class="petal" style="--x:5"></div>
            <!-- 花心 -->
            <div class="circle"></div>
        </div>
    </div>
</body>

</html>

CSS:

/* 清除浏览器设置的默认边距,
使边框和内边距的值包含在元素的width和height内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 使用flex布局,让内容垂直和水平居中 */
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
/* 花朵 */
.flower {
    position: relative;
    width: 80px;
    height: 80px;
    transform-origin:  100% 100%;
    animation: rotate 3s linear infinite;
}
/* 花瓣 */
.petal {
    display: block;
    /* 花瓣的宽高等于花朵的宽高 */
    width: 80px;
    height: 80px;
    background: red;
    border-radius: 0 70px;
    position: absolute;
    /* 让不同的花瓣旋转为花朵 */
    transform-origin: 100% 100%;
    transform: rotate(calc(var(--x) * 60deg));
}
/* 花心 */
.circle {
    width: 100px;
    height: 100px;
    position: absolute;
    background: #fff200;
    border-radius: 50%;
    left: 30px;
    top: 30px;
    box-shadow: 0 0 50px yellow;
    background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b);
}
/* 花朵旋转动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

今天的学习就到这里了,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

本文分享自微信公众号 - AlbertYang(AlbertYang666),作者:Albert

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-01-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 东西一律免费送!这个小程序正在颠覆二手交易平台 | MINA 奖

    知晓君
  • 七夕节送礼怎么让女朋友满意?快来抄作业!

    没有人不被这个亘古难题困住的,尤其是男性,在为女性挑选心爱的礼物方面,更是左右为难。

    数据STUDIO
  • 如何用程序绘制一朵花?

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    叶子陪你玩
  • [第二波] QTX个人艺术家限定品公布!

    ? 五一假期去哪里? 5月1日-5月3日 深圳福田会展中心 QQ潮玩展   200+潮玩限定品 更有[QQ潮玩]重磅新品和限定品 整装待发,等你来冲! 前天...

    腾讯ISUX
  • CSS简笔画:纯CSS绘制一顶帽子

    利用transform: rotate,使其沿着 X/Y/Z 轴进行 3D 旋转,从而形成帽子的大致形状。

    Javanx
  • 【编程心里】编程大牛教你正确的学习心态

    小明问大师,大师我已经开始学习c语言编程了为什么感觉我只会用他做数学题,而不能写自己想写的游戏呢? 大师看着地上的教学文章不说话; 小明说大师你是让我静心学习之...

    程序员互动联盟
  • Python分析44130条用户观影数据,挖掘用户与电影之间的隐藏信息!

    很多电影也上映,看电影前很多人都喜欢去 『豆瓣』 看影评,所以我爬取44130条 『豆瓣』 的用户观影数据,分析用户之间的关系,电影之间的联系,以及用户和电影...

    Python研究者
  • 4.页面绘制-脚本页面和个人中心页面

    加入输入框按钮和承载生成小说文本的input框,同时加入一些Gap间隔槽,提升结构美观,构成了脚本页面jiaoben.vue:

    玩蛇的胖纸
  • python爬取44130条用户观影数据,分析挖掘用户与电影之间的隐藏信息!

    大家都在外奔波了一年,今天是除夕,大家也可以回家放松放松,陪陪家人,我在这里祝看到这篇文章的朋友除夕快乐!

    Python研究者
  • 学会了C语言能做些啥?

    我现在C语言入门,基本靠自学,就看网上的那种教程,但是我怎么觉得它就是只能做下数学题,我觉得它并不能编辑出一个啥子游戏或者软件出来噢……初学者,见谅。 ? 马...

    程序员互动联盟
  • 画风清奇!这 4 个脑洞超大的小程序,让我笑得停不下来

    上线十个月以来,好玩的小程序层出不穷。什么组队敲木鱼、读口令领红包、凭颜值领红包等等等等。

    知晓君
  • 设计模式系列| 代理模式

    代理模式是一种结构型设计模式,让你能够提供对象的替代品或其占位符。代理控制着对于原对象的访问, 并允许在将请求提交给对象前后进行一些处理。

    狼王编程
  • Python条件选择与循环

    条件选择与循环是Python中非常基础也是非常重要的语句结构,本节重点介绍这两个部分:

    小雨编程
  • 基于深度学习的花卉识别(附数据与代码)

    前几天,想必大家都忙着过女神节,但送礼物这件事情还是让不少直男苦恼,口红色号那么多,花还有那么多品种,一个不小心选错就容易踏入雷区,下面就教大家用机器学习来识别...

    Crossin先生
  • 菊花绽放:微信是如何识别小程序码的?

    小程序码识别步骤有哪些?与 QRCode 相比又有什么差异? 本文将以简明的语言介绍小程序码的识别过程。

    许典平
  • Flutter 动画鼻祖之CustomPaint

    老孟导读:CustomPaint可以称之为动画鼻祖,它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性,仅仅是绘制属性,一般情况下,Cust...

    老孟Flutter
  • 什么是IPO、ICO、DAICO

    efonfighting
  • 测试了一下编解码的执行效果

    我觉得评论说的很好。但是以淘金式思路来看这个问题,需要提出自己的问题,进行批判性吸收。

    静儿
  • 北京这两天为啥颜值爆表?

    大数据文摘

扫码关注云+社区

领取腾讯云代金券