送给你对象的一朵小红花 有音乐《送你一朵小红花》

最新推荐文章于 2024-06-15 11:34:22 发布
最新推荐文章于 2024-06-15 11:34:22 发布
阅读量659 收藏 1
点赞数 2
文章标签： html5 html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45458517/article/details/112345127
版权

送你一朵小红花

文章目录

@祝福各位

1、送你一朵小红花,奖励你人生第一回积极主动! 2、你呀,得去干点你这个年龄该干的事情,多出去看看,多走走! 3、蓝天白云,定会如期而至。 4、蓝天白云,再次启航。 5、不要放弃爱与希望,每一个逆行和命运抗争的、勇敢的人,都值得被奖励一朵“小红花”。

上在这里插入图片描述
在这里插入图片描述
图：

一、HTML

音乐已经放在七牛云上 复制的时候可直接使用 有需要的小伙伴并且没有服务器的朋友可以使用七牛云存自己写的网站
七牛云地址
七牛云的使用方法


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>送你一朵小红花</title>
    </head>

    <body>
        <!-- 容器 -->
        <div class="box">
            <!-- 花朵 -->
            <div class="flower-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>
        </div>
        
<audio
            class="music"
            autoplay="autoplay"
            loop="loop"
            preload="auto"
            controls="controls"
            src="http://qlikbei8s.hn-bkt.clouddn.com/wanwan.20%E7%A7%A6%E6%99%A8%E9%98%B3%20-%20%E9%80%81%E4%BD%A0%E4%B8%80%E6%9C%B5%E5%B0%8F%E7%BA%A2%E8%8A%B1%E3%80%8A%E7%94%B5%E5%BD%B1%E4%B8%BB%E9%A2%98%E6%9B%B2%E7%BA%AF%E5%87%80%E7%89%88%E3%80%8B%EF%BC%88%E7%BF%BB%E8%87%AA%E8%B5%B5%E8%8B%B1%E4%BF%8A%EF%BC%89.mp3"
        ></audio>
    </body>
</html>

二.CSS

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                background-color: #bce6eb;
            }
            /* 使用flex布局，让内容垂直和水平居中 */
            .box {
            
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
            }
            /* .flower-box{
                
                animation: you 3s linear infinite;
            } */
            /* 花朵 */
            .flower {
                position: relative;
                width: 80px;
                height: 80px;
                transform-origin: 100% 100%;
                animation: rotate 2s 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);
                }
            }
            /* @keyframes you{
                0% {
                    transform: translate(50px,50px);
                }
                50%{
                    transform: translate(150px,150px);
                }
                100% {
                    transform: translate(50px,50px);
                }
            } */
            .music {
                position: absolute;
                bottom: 20px;
                margin-left: 50%;
                left: -150px;
            }

二、全文

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>送你一朵小红花</title>
        <style>
            /* 清除浏览器设置的默认边距， */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                background-color: #bce6eb;
            }
            /* 使用flex布局，让内容垂直和水平居中 */
            .box {
            
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
            }
            /* .flower-box{
                
                animation: you 3s linear infinite;
            } */
            /* 花朵 */
            .flower {
                position: relative;
                width: 80px;
                height: 80px;
                transform-origin: 100% 100%;
                animation: rotate 2s 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);
                }
            }
            /*可以让花朵动起来 可以取消注释*/
            /* @keyframes you{
                0% {
                    transform: translate(50px,50px);
                }
                50%{
                    transform: translate(150px,150px);
                }
                100% {
                    transform: translate(50px,50px);
                }  
            } */
            .music {
                position: absolute;
                bottom: 20px;
                margin-left: 50%;
                left: -150px;
            }
        </style>
    </head>

    <body>
        <!-- 容器 -->
        <div class="box">
            <!-- 花朵 -->
            <div class="flower-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>
        </div>

        <audio
            class="music"
            autoplay="autoplay"
            loop="loop"
            preload="auto"
            controls="controls"
            src="http://qlikbei8s.hn-bkt.clouddn.com/wanwan.20%E7%A7%A6%E6%99%A8%E9%98%B3%20-%20%E9%80%81%E4%BD%A0%E4%B8%80%E6%9C%B5%E5%B0%8F%E7%BA%A2%E8%8A%B1%E3%80%8A%E7%94%B5%E5%BD%B1%E4%B8%BB%E9%A2%98%E6%9B%B2%E7%BA%AF%E5%87%80%E7%89%88%E3%80%8B%EF%BC%88%E7%BF%BB%E8%87%AA%E8%B5%B5%E8%8B%B1%E4%BF%8A%EF%BC%89.mp3"
        ></audio>
    </body>
</html>

总结

在这里插入图片描述

欢迎各位大佬有好意见或者错误的地方多指教

倒 爷
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
用Python教你画一棵绝美碎花树~学会就能送给喜欢的人啦
L010409的博客
12-23 5118
????导语：一束花的浪漫永不过时~ 哈喽ya!!铁汁们~今天这期呢就是用Python教大家画图啦~想来想去不知道画什么好~直到看到床头放着的几朵郁金香已经枯萎得没眼看啦~wo就想用Python画一朵不同的花（绝对买不到的哈）送给大家啦~毕竟有哪个女生不喜欢花呢？?又有谁能拒绝一束花的浪漫！！???? 鲜花文案跟本期碎花树的源码已经给可爱的你们打包好了???? 想领取更多完整源码或Python学习资料可点击这行字体 ????小文案： ????有人朝他扔鲜花有人朝他扔泥巴 他不接鲜花也不在意泥巴
送你一朵小红花icon
01-18
送你一朵小红花icon
送你一朵小红花，CSS实现一朵旋转的小红花
热门推荐
AlbertYang的博客
01-06 1万+
送你一朵小红花，愿你勇敢的面对生活中的苦难，不要放弃爱与希望，蓝天白云，定会如期而至。 视频： B站视频链接：https://www.bilibili.com/video/BV1xX4y1M7yM 送你一朵小红花，CSS实现一朵旋转的小红花 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
今天是六一儿童节~身为我们班的信息担当的我为我们班同学准备了一个小惊喜，你确定不来看看吗（turtle库实现：送给同学们一朵小红花）
qiuweichen1215的博客
06-01 1607
祝所有人儿童节快乐~天天开心~今天呢，也是一年一度的六一儿童节（虽然各位大佬可能不过，但是我还是要过的），在我们六年级过的时候，我们班同时也举行了毕业典礼，为了这个毕业典礼，我写了一晚上代码（这就是昨天没更新的原因），也就写了两个小时就写完了，所以今天我们用Python里的turtle库（随便写的，要不然我怎么会写turtle库呢）实现一个小红花吧送给我们班的同学们~（千万不要让老师知道我把电脑控屏软件给破解了，极域电子教室，某些人别跟信息老师说）也是非常的水~
小红花代表什么_小红花是什么意思
weixin_39550258的博客
01-14 3590
1. 富有想象力的Horton相信肯定有一些小生物生活在红花草花朵上的斑点上。Imaginative Horton believes there are tiny beings living on the speck precariously perched on a clover blossom.2. 如阿贝尔比目鱼、比利彼牛肉汤、鲜桃烤鸭、红花圣雅克鲜贝、布莱鲜小黄瓜烤鸭块等名菜，都是马克西姆...
如何用海龟库画出一朵玫瑰送给你的朋友
zjrhGroxMC2011的博客
05-19 829
【代码】如何用海龟库画出一朵玫瑰送给你的朋友。
让你的断舍离不再无处安放 享物说发起小红花联盟
趣味科技v
12-27 234
可能每个女生都有过这样的遭遇：一件不常用的物品，二手卖不出去还浪费时间，扔了又舍不得，可是不扔怎么买新的呢？正是在这样的需求之下，大量二手闲置交易平台应运而生。而在众多的...
大学生金融小白自学Python做量化投资需要注意哪些？
小壁虎的春天
05-20 3368
大学生金融小白自学python做量化投资需要注意些什么?量化金融其实是一个交叉复合学科，需要掌握数学、计算机、金融等方面的知识。显而易见，对于金融学背景的同学来说，就需要另外学习计算机编程的知识，而计算机背景的同学则需要补充金融知识。由于是24K纯金融学专业背景，所以金程AQF小编就跟大家分享一下，作为一个零编程基础的金融小白，是如何入门量化金融的。 一、量化工具 1、编程语言Python 工欲善其事，必先利其器。想要入门量化，学会一门编程语言是必不可少的。对于量化金融来说，主流的编程语言有Pytho
叮咚谁呀我是送信的邮递员呀_《幼儿园听说游戏》PPT课件.ppt
weixin_36391973的博客
01-14 1477
《《幼儿园听说游戏》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《幼儿园听说游戏》PPT课件.ppt(16页珍藏版)》请在装配图网上搜索。1、幼儿园听说活动 一、听说游戏的内涵与特征 二、听说游戏的教育目标 三、听说游戏的设计与组织 一、听说游戏的内涵与特征 (一)听说游戏的内涵 听说游戏活动 是一种特殊形式的语言教育 活动，活动的目标是以培养儿童倾听和表 达能力为主，活动的内容主要集中...
开天又辟地 小户型的超妙利用
sinat_26894903的专栏
04-07 445
面对小户型，设计师们总是会使出浑身解数，放弃大气的“宏远”，织出温馨的童话;舍弃广袤的“农场”，造出锦簇的田园;规避面积带来的局限，无限放大一个闪光点。就像这个家的主人一样，仗着灵感和想象力，在33平米的空间里，开了天又辟了地。(杂志编辑、造型：王玉坤 撰文：安临夜 摄影：围观工作室) 　　“开天”在小户型里还挺常见，只要层高足够，通过增加阁楼来利用空间;但是，“辟地”的创意实属少见，几乎只
2_送你一朵小红花.py
10-09
2_送你一朵小红花.py
小红花头像生成.apk
05-16
2021年送你一朵小红花，一键生成2021小红花头像，助你在新的一年大吉大利，仍然斗志昂扬充满希望的迎接2021年的每一天。
粉色小红花掉落flash动画
07-24
粉色小红花掉落flash动画是一款卡通矢量粉色小红花朵动画素材下载。
小红花电脑房课堂教学助手jfHelp
04-01
《小红花电脑房课堂教学助手jfHelp》20230331版说明书 《小红花电脑房教学助手jfHelp》是适合多学校、多年级、多班级、多电脑房、多教师开展电脑房授课管理的软件，下面简称《小红花》。程序由两部分组成，一是学生...
【前端】HTML5基础
最新发布
Sig的博客
06-15 871
详细介绍HTML5基础
HTML5的新语义化标签
ggq53219的博客
06-11 392
HTML5 引入了一系列新的语义化标签，这些标签为网页内容提供了更明确的含义，有助于改善网页的可访问性和搜索引擎优化（SEO）。通过使用这些新的语义化标签，我们可以创建更加清晰、易于理解和维护的 HTML 文档，同时提高网页的可访问性和搜索引擎优化效果。
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1216
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 483
超文本标记语言（HTML）简介
给我一个低代码构建的“送你一朵小红花”系统的框架图
07-17
我可以为您提供一个低代码构建的“送你一朵小红花”系统的基本框架图。请注意，这只是一个示例，实际系统的具体实现可能会有所不同。 ``` +----------------------------------------+ | 用户界面（UI） | +-------...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值