送给你对象的一朵小红花 有音乐《送你一朵小红花》
送你一朵小红花
文章目录
- 送你一朵小红花
- @祝福各位
- 一、HTML
- 二.CSS
- 二、全文
- 总结
@祝福各位
1、送你一朵小红花,奖励你人生第一回积极主动! 2、你呀,得去干点你这个年龄该干的事情,多出去看看,多走走! 3、蓝天白云,定会如期而至。 4、蓝天白云,再次启航。 5、不要放弃爱与希望,每一个逆行和命运抗争的、勇敢的人,都值得被奖励一朵“小红花”。一、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;
}
二、全文
<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>
总结
欢迎各位大佬有好意见或者错误的地方多指教