Markdown文档的一些玩法
::: hljs-center
Markdown内嵌哔哩哔哩视频
:::
#以下是哔哩哔哩内嵌视频代码
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
<iframe
src="//player.bilibili.com/player.html?isOutside=true&aid=1005507099&bvid=BV1sx4y1J7Bp&cid=1577619729&p=1&autoplay=0"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
></iframe>
</div>::: hljs-center
哔哩哔哩代码解释
:::
<!-- 创建一个div容器，用于包裹iframe -->
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
<!-- 设置div的样式：
position: relative; 使div相对于其正常位置进行定位
width: 100%; 设置div的宽度为100%
padding-bottom: 56.25%; 设置底部内边距为56.25%，用于保持16:9的宽高比
height: 0; 设置div的高度为0 -->
<!-- 创建一个iframe，用于嵌入Bilibili视频播放器 -->
<iframe
src="//player.bilibili.com/player.html?isOutside=true&aid=1005507099&bvid=BV1sx4y1J7Bp&cid=1577619729&p=1&autoplay=0"
<!-- src属性指定iframe的内容来源，这里是Bilibili视频播放器的URL，包含视频的aid、bvid和cid参数，以及播放页码p -->
autoplay=0
<!-- autoplay属性为0时，表示视频不会自动播放 -->
scrolling="no"
<!-- scrolling属性设置为"no"，表示不显示滚动条 -->
border="0"
<!-- border属性设置为"0"，表示没有边框 -->
frameborder="no"
<!-- frameborder属性设置为"no"，表示没有边框 -->
framespacing="0"
<!-- framespacing属性设置为"0"，表示没有框架间距 -->
allowfullscreen="true"
<!-- allowfullscreen属性设置为"true"，表示允许全屏显示 -->
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
<!-- 设置iframe的样式：
position: absolute; 使iframe绝对定位
top: 0; 设置iframe的顶部位置为0
left: 0; 设置iframe的左侧位置为0
width: 100%; 设置iframe的宽度为100%
height: 100%; 设置iframe的高度为100% -->
></iframe>
</div>::: hljs-center
内嵌播放器
:::
播放音乐
::: hljs-center
代码内容
:::
<div class="audio-player">
<h3>播放音乐</h3>
<audio controls id="audio">
<source src="这里填写你音频的地址" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
</div>
<style>
.audio-player {
width: 100%;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.audio-player h3 {
margin-bottom: 20px;
color: #333;
}
.audio-player audio {
width: 100%;
outline: none;
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
25% {
background-position: 50% 50%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 自定义音频控制面板样式 */
audio::-webkit-media-controls-panel {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
}
/* 自定义音频进度条样式 */
audio::-webkit-media-controls-timeline {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientProgress 20s ease infinite; #代码来源：https://blog.lqzexe.top/
}
/* 自定义播放按钮样式 */
audio::-webkit-media-controls-play-button::before {
content: "播放";
color: white;
font-size: 14px;
padding: 5px;
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
border-radius: 5px;
}
/* 自定义音量滑块样式 */
audio::-webkit-media-controls-volume-slider {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
border-radius: 5px;
}
/* 自定义静音按钮样式 */
audio::-webkit-media-controls-mute-button::before {
content: "静音";
color: white;
font-size: 14px;
padding: 5px;
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 800% 800%;
animation: gradientBG 20s ease infinite;
border-radius: 5px;
}
@keyframes gradientProgress {
0% {
background-position: 0% 50%;
}
25% {
background-position: 50% 50%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>::: hljs-center
代码注释
:::
<!-- 创建一个div容器，用于包裹音频播放器 -->
<div class="audio-player">
<!-- 标题 -->
<h3>播放音乐</h3>
<!-- 创建一个audio标签，包含音频播放器 -->
<audio controls id="audio">
<!-- 指定音频文件的来源和类型 -->
<source src="这里填写你音频的地址" type="audio/mpeg">
<!-- 当浏览器不支持audio标签时，显示的提示信息 -->
您的浏览器不支持音频播放。
</audio>
</div>
<!-- 添加自定义样式 -->
<style>
/* 定义audio-player类的样式 */
.audio-player {
width: 100%; /* 设置宽度为100% */
max-width: 600px; /* 设置最大宽度为600px */
margin: 20px auto; /* 设置外边距为上下20px，左右自动 */
padding: 20px; /* 设置内边距为20px */
border: 1px solid #ccc; /* 设置边框为1px实线，颜色为#ccc */
border-radius: 10px; /* 设置边框圆角为10px */ #代码来源：https://blog.lqzexe.top/
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置盒子阴影 */
text-align: center; /* 设置文本居中 */
}
/* 定义audio-player类下h3标签的样式 */
.audio-player h3 {
margin-bottom: 20px; /* 设置底部外边距为20px */
color: #333; /* 设置字体颜色为#333 */
}
/* 定义audio-player类下audio标签的样式 */
.audio-player audio {
width: 100%; /* 设置宽度为100% */
outline: none; /* 移除外边框 */
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
border-radius: 10px; /* 设置边框圆角为10px */
padding: 10px; /* 设置内边距为10px */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置盒子阴影 */
}
/* 定义背景渐变动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%; /* 初始位置 */
}
25% {
background-position: 50% 50%; /* 25%时的位置 */
}
50% {
background-position: 100% 50%; /* 50%时的位置 */
}
75% {
background-position: 50% 50%; /* 75%时的位置 */
}
100% {
background-position: 0% 50%; /* 100%时的位置 */
}
}
/* 自定义音频控制面板样式 */
audio::-webkit-media-controls-panel {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
}
/* 自定义音频进度条样式 */
audio::-webkit-media-controls-timeline {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientProgress 20s ease infinite; /* 设置背景动画 */
}
/* 自定义播放按钮样式 */
audio::-webkit-media-controls-play-button::before {
content: "播放"; /* 设置按钮内容为"播放" */
color: white; /* 设置字体颜色为白色 */
font-size: 14px; /* 设置字体大小为14px */
padding: 5px; /* 设置内边距为5px */
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */ #代码来源：https://blog.lqzexe.top/
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
border-radius: 5px; /* 设置边框圆角为5px */
}
/* 自定义音量滑块样式 */
audio::-webkit-media-controls-volume-slider {
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
border-radius: 5px; /* 设置边框圆角为5px */
}
/* 自定义静音按钮样式 */
audio::-webkit-media-controls-mute-button::before {
content: "静音"; /* 设置按钮内容为"静音" */
color: white; /* 设置字体颜色为白色 */
font-size: 14px; /* 设置字体大小为14px */
padding: 5px; /* 设置内边距为5px */
background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */
background-size: 800% 800%; /* 设置背景大小 */
animation: gradientBG 20s ease infinite; /* 设置背景动画 */
border-radius: 5px; /* 设置边框圆角为5px */
}
/* 定义进度条背景渐变动画 */
@keyframes gradientProgress {
0% {
background-position: 0% 50%; /* 初始位置 */
}
25% {
background-position: 50% 50%; /* 25%时的位置 */
}
50% {
background-position: 100% 50%; /* 50%时的位置 */
}
75% {
background-position: 50% 50%; /* 75%时的位置 */
}
100% {
background-position: 0% 50%; /* 100%时的位置 */
}
}
</style>