学习
实践
活动
工具
TVP
写文章
专栏首页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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:Albert
原始发表时间:2021-01-06
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ✿送你一朵小红花✿【人脸关键点检测】

    小帅丶
  • 云存储硬核技术内幕——(25) 送你一朵小红花

    云原生(Cloud Native)指的是从应用设计、开发、构建、部署、运行到迭代的一整套体系框架。云原生基金会CNCF(Cloud Native Computi...

    用户8289326
  • Python分析44130条用户观影数据,挖掘用户与电影之间的隐藏信息!

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

    Python研究者
  • python爬取44130条用户观影数据,分析挖掘用户与电影之间的隐藏信息!

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

    Python研究者
  • 设计模式系列| 代理模式

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

    狼王编程
  • 19款直播礼物上新!新年主题助直播间年味加倍

    何以解忧,唯有礼物!乐乐又带着直播新功能来给大家拜早年啦~ 你有没有这样的感觉:晚会直播,抽奖发红包气氛到达高潮的时候,发弹幕已经不够表达激动之情,恨不能反...

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

    知晓君
  • 99公益日×微光行动 一块做好事!

    或许你还记得 去年11月份 微光行动在深圳地铁里建造了一座“公园” 成为忙碌城市里的温暖风景线 今年 微光的温暖将由你一起来共建 ▼ 9月1号-9月9号期间 ...

    腾讯举报中心
  • Python条件选择与循环

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

    小雨编程
  • C语言实现扫雷小游戏(下)

    上篇博客实现了鸡肋的扫雷小游戏,不能实现雷盘的展开,体验不是很好,这篇博客对其进行优化吧。

    小孙同学
  • 纯css实现旋转的金字塔

    css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹。那么如何用CSS画一个金字塔呢?

    小丑同学
  • 王者荣耀白晶晶皮肤1小时销量突破千万!分析网友评论我发现了原因

    1、这两天在朋友圈、短视频,微博这些社交平台经常刷到这些内容(王者荣耀芈月白晶晶的皮肤)。

    Python研究者
  • Java基础-day09-代码题-对象;类;封装

    Java基础-day09-代码题-对象&类&封装 一、定义一个空调类和对应的测试类 该题考查点:属性和方法的使用! 要求: 1、空调有品牌和价格两个属性,并且将...

    Java帮帮
  • 技术驱动下的“新出海”——GTC2022 技术出海峰会,共探数字全球化

    对于那些着眼于全球市场的中国企业来说,由“元宇宙”、“AI”、“云计算”、“大数据”等技术革命带来的时代红利,正引领着大量的国内企业实现品牌及产品在海外的升级迭...

    腾小云
  • “JUGUGU分布式私钥托管登录”的一个技术说明小书

    “我觉得现阶段最好的赛道不是按照资产类别来分类的,是朝着一个方向不断走,就是区块链怎么能实现大规模的用户,往不断降低门槛的地方走,这跟熊市牛市没关系。这个话题无...

    用户7978913
  • 一键查询明星个人信息,并以知识图谱可视化展示

    最近想搞一点好玩的事情(技术),今天打算做一个小程序:一键查询明星个人信息。(从数据抓取到知识图谱展示,全程代码完成原创,不涉及调用api包)

    Python研究者
  • 使用CSS3实现酷炫的3D旋转视图

    3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击...

    徐小夕
  • 微信小程序加速能力释放将会成为新的流量洼地

    在 2017 年还剩最后三天的时候,微信小程序上线了「小游戏」板块,千呼万唤后,微信小程序终于正式支持游戏了,小游戏的开放加速了小程序能力释放的过程,让小程序迅...

    速成应用小程序开发平台

扫码关注腾讯云开发者

领取腾讯云代金券