分享公众号侧边栏-自制
2023-08-12 / 1 评论 / 48 阅读 / 7 点赞

分享公众号侧边栏-自制

厕所干饭人
2023-08-12 / 1 评论 / 48 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年11月12日,已超过103天没有更新,若内容或图片失效,请留言反馈。


Test

说实话这个功能真的非常简单,下面是代码

<style>
.sidebar {
  width: 249px;
  height: 148px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://img1.imgtp.com/2023/08/12/6Ul9uT0L.png');
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease; /* 添加过渡效果 */
  transform-style: preserve-3d; /* 保持元素的3D变换效果 */
}

.sidebar:hover::before {
  transform: none; /* 移除任何已应用的变换 */
  background-image: url('https://img1.imgtp.com/2023/08/12/5q7VPvSI.png');
}
</style>

<div class="sidebar"></div>

我的博文,就结束了? 当然不可能了 ?

在后来我发现了这个 ?

Test

也就是添加了这行代码

  transform: rotate(45deg); /* 将图像旋转45度 */

下面完整代码

<style>
.sidebar {
  width: 249px;
  height: 148px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.sidebar::before {
  transform: rotate(45deg); /* 将图像旋转45度 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://img1.imgtp.com/2023/08/12/6Ul9uT0L.png');
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease; /* 添加过渡效果 */
  transform-style: preserve-3d; /* 保持元素的3D变换效果 */
}

.sidebar:hover::before {
  transform: none; /* 移除任何已应用的变换 */
  background-image: url('https://img1.imgtp.com/2023/08/12/5q7VPvSI.png');
}
</style>

<div class="sidebar"></div>

7

评论 (1)

表情
😀
😃
😄
😁
😆
😅
😂
🤣
☺️
😊
😇
😉
😌
😍
😘
😗
😙
😚
😋
😛
😜
😝
🤑
🤗
🤓
😎
🤩
🥳
😏
😒
😞
😔
😟
😕
🙃
🤪
😬
🤐
🤨
😑
😶
😮
😯
😲
😳
🥺
😦
😧
😨
😰
😥
😢
😭
😱
😖
😣
😞
😓
😩
😫
🥱
😴
😪
😵
🤯
😤
😠
😡
🤬
😷
🤒
🤕
🤢
🤮
🤧
🥵
🥶
🥴
😈
👿
👹
👺
💀
☠️
👻
👽
🤖
💩
😺
😸
😹
😻
😼
😽
🙀
😿
打卡
取消
  1. 头像
    小Q
    Windows 10 · Google Chrome

    感谢分享

    回复