2021-01-09发表2023-10-19更新技术分享3 分钟读完 (大约455个字)

html网页音乐播放器

其实一直想在网站上加一个音乐播放器的，但是当时搜索的是谷歌浏览器无法自动播放，所以就没准备加。并且其实当时也自己写了一个播放器，网页音乐播放器音乐播放器 html++css+js 但是由于懒得写 CSS 代码，所以比较丑，然后就没有往网站上加。但是呢，有一个是我一直不明白的地方，就是当时浏览了一个网页，发现他的音乐可以直接播放，所以今天就来研究一下。

其实也就是右键检查，来进行代码的查看，然后 Ctrl+U 查看一下源代码，搜索到刚才看的位置，然后看他的这些代码有啥玄机。然后我就发现了一个库。

GitHub：https://github.com/DIYgod/APlayer 非常 nice 的一个库。

APlayer 是一个功能强大的 HTML5 音乐播放器，Metingjs 基于 APlayer 插件封装好的插件，开箱即用。

然后我们直接贴代码就好了，毕竟是人家封装好的库了，所以可以直接使用。

html 网页音乐播放器

支持的浏览器：

Chrome
Firefox
Safari
Internet Explorer 11
Microsoft Edge

在博客中，你提供了该库的详细选项和默认值，使读者可以轻松了解如何自定义音乐播放器。

具体的代码可以去看 GitHub 库，里面有详细的解释。简单贴一下我们的这个底部小图标的代码吧。

1	<meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"></meting-js>

非常的方便，HTML 网页音乐播放器，开箱即用。

2020-12-16发表2023-10-19更新技术分享4 分钟读完 (大约632个字)

html实现图片旋转显示背面内容

其实说是HTML，实际上还是要通过CSS来实现具体效果的，毕竟实际上HTML是框架，而CSS则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。

可以看一下动图演示:

html实现图片旋转显示背面内容

其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。

简单介绍一下这个HTML实现图片旋转显示背面文字的案例思路。

首先是创建一个框架，用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。然后接下来先将文字进行旋转180°，之后设置hover属性即可。之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。

主要用到的还是上面两个属性，一个是transform: rotateY(180deg); 这个是设置内容旋转180°，然后再一个是backface-visibility: hidden; 这个是隐藏旋转的内容的背面，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #0d3462;
    }
    .wutai {
        width: 760px;
        height: 220px;
        margin: 100px auto;
    }
    .fu {
        width: 170px;
        height: 190px;
        margin: 10px;
        transition: 1.5s;
        transform-style: preserve-3d;
        float: left;
        position: relative;
    }
    .fu:hover {
        transform: rotateY(180deg);
    }
    .box {
        /* position: absolute; */
        width: 170px;
        height: 190px;
        position: absolute;
    }
    .face {
        border: 2px solid #4b2518;
        backface-visibility: hidden;
    }
    .hip {
        border: 2px solid white;
        background-color: #4b2518;
        color: white;
        text-align: center;
        transform: rotateY(180deg);
        backface-visibility: hidden;
    }
</style>
<body>
    <div class="wutai">
        <div class="fu">
            <div class="box face">
                <img src="1.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <!-- 其他图片和文字部分 -->
    </div>
</body>

具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。

如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。

2020-12-05发表2023-10-19更新技术分享5 分钟读完 (大约684个字)

Css :host是什么？

今天想要精进（没事干）一下我的HTML和CSS技术，所以准备临摹一下谷歌的首页，也就是那个上面是搜索框，下面是快捷方式的页面。类似于这个页面: 谷歌搜索页面的样式，不过下面没有Google搜索什么的，只是一个简单的快捷方式，将常用的页面添加成了快捷方式（之所以不上图是因为不想让你们看到我的快捷页面，哈哈）。

其实这个一看就感觉很容易就能做出来的效果了，唯一难度应该就是在下面快捷方式中的样式了。碰到就会发生一个小变化，这个其实使用:hover伪类即可。但是在做的过程中，我也在使用F12查看谷歌自身的代码，参考一下宽高之类的，然后就发现了一个小问题，它里面的好多代码我都看不懂啊，什么:host，什么 –ntp-theme-shortcut-background-color: rgba(241, 243, 244, 1); 之类的。

遇事不要慌，我们先Ctrl+U看一下源代码，发现谷歌的源代码很简单，因此我觉得它应该是通过JavaScript渲染来维护页面的。然后这个:host是什么还不清楚，只好请出百度了，一查才知道，原来这是一个伪类。

CSS 伪类函数 :host() 选择包含使用这段CSS的Shadow DOM的影子宿主（这样就可以从Shadow DOM中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是:host-context()的作用。

简单的举一个例子:

/* 选择阴影根元素，仅当它与选择器参数匹配 */
:host(.special-custom-element) {
  font-weight: bold;
}

通过:host来为选定的元素提供特殊的效果，这就是:host的用法了。最后，简单的看一下我写的Google页面吧。

css:host是什么？

写的很拉跨，哈哈，不过确实有所收获。如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。

2020-11-24发表2023-10-19更新日常学习7 分钟读完 (大约1076个字)

网页音乐播放器音乐播放器 html+css+js

首先准备工作为 jQuery、HTML、CSS、JavaScript，别的其实并不需要，而且其实 JavaScript 也不需要。最初是准备不使用 jQuery 的，但是发现用 jQuery 只需要几行代码就能实现的功能，而用原生的 JavaScript 却需要好多，而且也不容易实现，所以最后才准备使用 jQuery 了。

jQuery 的安装各位应该都会吧，如果不会的话，我放一下代码。通过使用 Node.js 来安装，在你的 JS 文件夹里按住 Shift 键并右键，选择打开 PowerShell 窗口，之后只需要输入 cnpm install jquery 即可，或者直接去中文站下载也行，这里不多讲述了。

音乐播放器

列表的点击显示和隐藏就是通过 jQuery 来实现的，很简单，如果使用 JavaScript 还是那句话，麻烦。

之后文字的打字机效果是通过 typed 这个库来实现的，GitHub 跳转链接。其实这个效果加不加都是无所谓的，只是好看了一丢丢而已，并且其实我的 CSS 只是随便写了一下，完全可以稍微优化一下 CSS。

目前的效果也就是点击列表的歌曲，会自动切换音乐和图像，然后上面的目前播放的名字也会换成该音乐的名字。这个网页实现音乐播放器的功能很容易，基本上一眼就能看懂了，后期可能会加一些别的效果，并且把样子做一下，搞一下 CSS。

以下是代码和一些简单的讲解：

// JS，名字我是叫的 music.js
// 记录图片和音乐以及正在播放的名字
var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];
var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];
var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];

// 点击隐藏和显示
$(".liebiao").click(function() {
  if ($(".msxulie").is(":hidden")) {
    $(".msxulie").show();
  } else {
    $(".msxulie").hide();
  }
});

// 文字效果
window.onload = function() {
  var typed = new Typed(".zzbf", {
    strings: ['', '音乐播放器正在播放:'],
    startDelay: 300,
    typeSpeed: 100,
    loop: true,
    backSpeed: 50,
    showCursor: true,
    cursorChar: '➼'
  });
}

// 点击切换音乐
$(".jol").click(function() {
  $(".mscontrol").attr("src", mslists[0]);
  $(".msimg").attr("src", imglists[0]);
  $(".msplayingtext").html(namelists[0]);
  $(".mscontrol")[0].play();
});

$(".sya").click(function() {
  $(".mscontrol").attr("src", mslists[1]);
  $(".msimg").attr("src", imglists[1]);
  $(".msplayingtext").html(namelists[1]);
  $(".mscontrol")[0].play();
});

$(".sitr").click(function() {
  $(".mscontrol").attr("src", mslists[2]);
  $(".msimg").attr("src", imglists[2]);
  $(".msplayingtext").html(namelists[2]);
  $(".mscontrol")[0].play();
});

下面是 CSS 代码，这个我是叫的 index.css：

/* 播放器位置 */
.msplayer {
  float: left;
  background-color: aqua;
  border-radius: 20%;
}

/* 播放器图片 */
.msplayer .msimg {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 播放器控制器 */
.msplayer .mscontrol {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 200px;
}

/* 播放器列表按钮 */
.msplayer .liebiao {
  position: relative;
  bottom: 25px;
}

/* 音乐列表 */
.msplayer .msxulie {
  text-align: center;
  width: 315.14px;
  position: absolute;
  display: block;
  background-color: bisque;
  top: 20px;
  left: 315.14px;
  border-radius: 20%;
  cursor: pointer;
}

/* 正在播放 */
.msplaying {
  position: absolute;
  top: 0px;
  left: 80px;
  font-size: 10px;
}

$(".mscontrol").attr("src",mslists[0]);
$(".msimg").attr("src",imglists[0]);
$(".msplayingtext").html(namelists[0]);
$(".mscontrol")[0].play();

第一行是获取 audio 的 src 值，把它设置为我们数组里的值，第二行是更改图片，第三行是修改名字，最后一行其实加不加无所谓的，就是一个自动播放效果，如果换歌就进行自动播放。

然后我那两行注释是修改那个 typed 的效果的，但是发现函数执行了就很难停止，所

以就给注释掉了，效果也是很容易的，就是将那个 typed 效果创建成一个函数，之后调用即可，然后在里面设置一个变量用于接受我们传递的参数就好了，不过目前来说不会怎么停止已经运行的函数，所以这个想法就搁浅了。

CSS 代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后 HTML 也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

2020-11-19发表2023-10-19更新技术分享3 分钟读完 (大约404个字)

网站媒体查询@media详解

通过使用 @media 查询，可以针对不同的媒体类型来定义不同的样式。@media 可以根据不同的屏幕尺寸来设置不同的样式，特别是如果需要创建响应式的网页，@media 非常有用。当浏览器窗口大小改变时，页面会根据浏览器的宽度和高度进行重新渲染。

用法非常简单，例如：

@media screen and (max-width:1000px) {
    .topbox .logo {
        display: none;
    }
}

类似于上面的小例子，在CSS中设置了一个媒体查询，它会检查浏览器的宽度是否小于1000px，如果是，则执行查询块中的样式，从而实现不同屏幕大小下的不同页面显示。

然而，这种方法通常更适合小型网站。对于大型网站，通常会开发更复杂的自适应方法，例如淘宝和京东等，它们为了提供极致的用户体验会实施更高级的适配策略。

另一种简单的方法是在HTML中使用不同的CSS文件，根据不同的页面宽度引入不同的CSS文件，如下所示：

1 2	<link rel="stylesheet" media="screen and (max-width:1400px)" href="./css/public2.css"> <link rel="stylesheet" media="screen and (max-width:1000px)" href="./css/public3.css">

这样，不同的页面宽度将加载不同的CSS文件，实现了自适应效果。

如果需要更多关于 @media 查询的信息，推荐阅读菜鸟教程中关于CSS @media 查询的教程。如果有任何疑问，请随时在评论区提出，我会尽快回答。

html网页音乐播放器

html实现图片旋转显示背面内容

Css :host是什么？

网页音乐播放器音乐播放器 html+css+js

网站媒体查询@media详解

链接

分类

最新文章

归档

标签

订阅更新

follow.it

html网页音乐播放器

html实现图片旋转显示背面内容

Css :host是什么？

网页音乐播放器 音乐播放器 html+css+js

网站媒体查询@media详解

链接

分类

最新文章

归档

标签

订阅更新

follow.it

网页音乐播放器音乐播放器 html+css+js