Markdown文档的一些玩法

博主：站长
发布时间：2024 年 12 月 25 日
167 次浏览
2 条评论
10367字数

> · 当前位置 : 首页 >> 默认分类 >> 《 Markdown文档的一些玩法》的正文

::: hljs-center

# Markdown内嵌哔哩哔哩视频

:::

```html
#以下是哔哩哔哩内嵌视频代码
<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

## 哔哩哔哩代码解释

:::

```html

<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"
    
  
    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 class="audio-player">
  <h3>播放音乐</h3>
  <audio controls id="audio">
    <source src="http://img.lqza.cn/funnyUrl/Sara11720624516522272.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
  </audio>
</div>

.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%; #代码来源：https://blog.lqzexe.top/
    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;
    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; #代码来源：https://blog.lqzexe.top/
    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

## 代码内容

:::

```html
<div class="audio-player">
  <h3>播放音乐</h3>
  <audio controls id="audio">
    <source src="这里填写你音频的地址" type="audio/mpeg">
    您的浏览器不支持音频播放。
  </audio>
</div>

.audio-player h3 {
    margin-bottom: 20px;
    color: #333;
  }

/* 自定义音频控制面板样式 */
  audio::-webkit-media-controls-panel {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    background-size: 800% 800%;
    animation: gradientBG 20s ease infinite;
  }

::: hljs-center

## 代码注释

:::

```html

<div class="audio-player">
  
  <h3>播放音乐</h3>
  
  <audio controls id="audio">
    
    <source src="这里填写你音频的地址" type="audio/mpeg">
    
    您的浏览器不支持音频播放。
  </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>
```

END

本文作者：站长文章标题：Markdown文档的一些玩法
本文地址：https://lqza.cn/archives/mds.html
版权说明：若无注明，本文由Mo陌独博客原创，转载请保留文章出处。

最后修改：2025 年 04 月 15 日