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

html旋转轮盘--图片在页面旋转

如何让元素在页面循环旋转？

旋转特效

需求： 图片素材自转，然后围绕中心点公转。

这里其实自转很好说，简单写一个动画然后设置时间以及无限循环就可以了。

@keyframes xuanzhuan {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

公转则主要要运用到 transform-origin 这个属性。

transform-origin 属性允许您更改转换元素的位置。
2D 转换元素可以改变元素的 X 和 Y 轴。 3D 转换元素，还可以更改元素的 Z 轴。

公转其实这里我推荐设置包裹元素的 div 宽高一致，最好是跟屏幕的高度一致，然后调整旋转的中心点即可。

这里大概估算一个值，最好是 50% 50%，然后在浏览器里自己旋转一下试试，看看偏移位置，然后再进行调整即可。

.xz {
    height: 736px;
    width: 736px;
    position: absolute;
    top: 0;
    transform-origin: 52.6% 50%;
    animation: xuanzhuan 10s linear infinite;
}

我这里是设置的 x 的点是我屏幕的宽度，然后 y 的点是屏幕的高度的一半，效果还可以，子元素都在线上旋转。

这里其实说一下，比如说有的元素在最初展示的时候，是不在主页面的，需要通过旋转来展现，我们可以让他先出现在主页面，然后通过旋转外面的元素，再调整 top，left 的值就行了。

2021-10-24发表2023-10-19更新技术分享2 分钟读完 (大约312个字)

html5居然还有这属性--ruby

前两天在看极客时间的《重学前端》，其中 Winter 老师说，工作的时候经常有人会说：“哇，原来还能这么用”，当时比较嗤之以鼻，没想到马上就轮到我了。

注释、ruby，在我的理解中，应该是通过 ::after 或 ::before 伪类结合 position: absolute 来达到这个效果，然而没想到 HTML5 新增了 <ruby> 标签。

<ruby> 标签定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用：ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

简单看一下效果展示效果演示：展示效果演示

非常非常的好用，在网站建设的过程中，比如说某个字是生僻字，纨绔子弟，总是会念成 “zhikua”，我们给他加上拼音 “纨绔” 纨绔wan ku

非常的 nice，真就是一直用一只学！

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-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 也是没什么难度的，自己看一眼就好了。

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

html旋转轮盘--图片在页面旋转

html5居然还有这属性--ruby

html网页音乐播放器

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

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

链接

分类

最新文章

归档

标签

订阅更新

follow.it

html旋转轮盘--图片在页面旋转

html5居然还有这属性--ruby

html网页音乐播放器

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

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

链接

分类

最新文章

归档

标签

订阅更新

follow.it

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