天给大家带来是一个开关锁，看一下效果。

·18移过去，它是一种开锁的状态，大家也可以通过gs部分来控制，我用的是cs部分来控制的。

·看一下代码区域，我的开发工具又是hprx开发uni app的，大家可以看到用一个box写了一个vivo式图容器，然后再vlog进行关联，里面有一个svg图片，这svg图片就是锁的图标，我没有引用，现成的只是用svg进行编写的，大家可以看到，而且注视也写的很清楚。

·它一个主体形状，锁定的图形，锁脸的图形，翻转动画，旋转动画等等，再形成这种六十度容器里面的样式，大家可以看一下。

·gs部分我留的是空的，大家可以有点基础的可以用gs部分来点击控制，毁掉都可以自己去动手去写一下，也可以用gs部分来控制。

·cs部分首先定了一个box整体的容器样式，隐藏了一个附选框，用第二层的local lobber看一下，就是lobber的样式进行了一个宽高，就是下面锁芯这个位置的宽度高度圆角，鼠标移过去以后手型的形状定义的，大家看注视就知道了。

·下面就是旋转的内部元素，大家看到主要是左倾斜十度，包括居中，下面就是锁链的部分，锁链的部分大家可以也可以看一下，但是左右宽高进行设置，加了一个平滑过渡的效果。

·下面这个就是s图形的宽度，下面就是这三个，大家可以看到，这两个大家可以看到当鼠标停在logo lober的区域后，power是一个鼠标悬停，发生回调，然后进行翻转锁链和翻转右侧，更改背景颜色和缩小锁定的图标，所以形成了鼠标移过去和这种开锁的状态。

如果喜欢的同学可以点赞收藏一下，也可以帮忙转发，也可以自己动手去写一下，想要原代码的不想写的可以找我进行去获取或点击下方都可以。

今天的开关锁就介绍到这，感谢大家。

言

一直想把B站作为视频托管的地方，服务器的磁盘和带宽毕竟有限，个人博客来说不太适合放太多的视频。所以就想把B站作为托管视频的地方，B站也有网页的内嵌代码，但是放到自己的网站上很难看，不能自适应界面大小，而且不支持高清播放，默认360p，一旦更改便会跳转至B站，这明显不是我们想要的。

获取内嵌代码

B站的嵌入代码因为功能不太完善，所以不是很好使用，在这里只要得到B站中视频的链接（src后面的链接），将之加到如下的代码中，就能获得一个自适应屏幕并且支持高清播放的代码了。

其中high_quality=1，danmaku=0是清晰度和弹幕的开关，1=表示开，0表示关闭

<div style="position: relative; padding: 30% 45%;">

<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=930007913&bvid=BV1aK4y1m7QE&cid=324564214&page=1&high_quality=1&danmaku=0, high_quality=1" frameborder="no" scrolling="no"></iframe>

</div>