加林森 发表于 2022-7-5 11:31

《Hope 22》纯音乐 【学习老黑的CSS精灵 】


<style>
.papa {
      margin: 0 auto;
      margin-top: 60px;
      width: 660px;
      height: 338px;
      background: tan ;/*url('pic/xcrm1.jpg') no-repeat center/cover;*/
      perspective: 1000px;
      box-shadow: 4px 4px 28px rgba(0,0,0,.85);
      position: relative;
}
.papa>span {
      width: 50%;
      height: 50%;
      transition: all 1s linear;
      transform-style: preserve-3d;
      position: absolute;
}
.papa>span:hover {
      transform: rotateZ(15deg) rotateY(60deg);
      box-shadow: 2px 2px 40px rgba(0,0,0,.95);
      cursor: pointer;
}
.papa>span:nth-child(1) {
      left: 0;
      top: 0;
      background: url('https://pic.imgdb.cn/item/62c3ae805be16ec74a39b6d3.jpg') 0px 0px;
}
.papa>span:nth-child(2) {
      left: 50%;
      top: 0;
      background: url('https://pic.imgdb.cn/item/62c3ae805be16ec74a39b6d3.jpg') -330px 0px;
}
.papa>span:nth-child(3) {
      left: 0;
      top: 50%;
      background: url('https://pic.imgdb.cn/item/62c3ae805be16ec74a39b6d3.jpg') 0px -169px;
}
.papa>span:nth-child(4) {
      left: 50%;
      top: 50%;
      background: url('https://pic.imgdb.cn/item/62c3ae805be16ec74a39b6d3.jpg') -330px -169px;
}

</style>

<div class="papa">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
</div>

<audio id="aud" src="https://www.joy127.com/url/91023.mp3" autoplay="autoplay" loop="loop"></audio>

加林森 发表于 2022-7-5 11:31

@马黑黑   

马黑黑 发表于 2022-7-5 13:03

CSS精灵学会了？

加林森 发表于 2022-7-5 13:08

基本理念明白了。

加林森 发表于 2022-7-5 13:10

马黑黑 发表于 2022-7-5 13:03
CSS精灵学会了？

还需要多制作才行。

红影 发表于 2022-7-5 14:05

这个应该是黑黑举例用的，队长咋用这个来做{:4_173:}

加林森 发表于 2022-7-5 14:09

红影 发表于 2022-7-5 14:05
这个应该是黑黑举例用的，队长咋用这个来做

我这个是套用的。比这个大的我也制作出来了。

红影 发表于 2022-7-5 14:12

马黑黑 发表于 2022-7-5 13:03
CSS精灵学会了？

一直对地址后面的XY取值有点迷糊，不明白为什么是负的。
想了想，是不是可以这样理解，假设选择器不动，需要移动底下的大图，那么肯定是往左往上才行，这些移动量就出现了负值，移动停止后，落在选择器框里的，就是想要的。

红影 发表于 2022-7-5 15:55

加林森 发表于 2022-7-5 14:09
我这个是套用的。比这个大的我也制作出来了。

饿呢，其实大的小的代码是一样的{:4_204:}

梦油 发表于 2022-7-5 17:15

你这个图可真有意思，四块恰似拼图。

我没分了。抱歉！不能为你加分了。

加林森 发表于 2022-7-5 17:18

红影 发表于 2022-7-5 15:55
饿呢，其实大的小的代码是一样的

嗯嗯。

加林森 发表于 2022-7-5 17:18

梦油 发表于 2022-7-5 17:15
你这个图可真有意思，四块恰似拼图。

我没分了。抱歉！不能为你加分了。

没关系的。

马黑黑 发表于 2022-7-5 18:23

红影 发表于 2022-7-5 14:12
一直对地址后面的XY取值有点迷糊，不明白为什么是负的。
想了想，是不是可以这样理解，假设选择器不动， ...
移动的是图片。比如，小块要取原始图片的{x,y}的{100,0}，则需要将图片左移 100个像素。

这个其实是图片做元素的背景图时，position 的位置设定，position 定义的是图片的位置，0px 0px 就是从左上角开始，-100px -100px 就是从 左上角往右的第100个像素、往下的第100个像素开始，形同图片左移、上移各 100 个像素。

梦油 发表于 2022-7-5 20:32

加林森 发表于 2022-7-5 17:18
没关系的。

谢谢

加林森 发表于 2022-7-5 21:15

梦油 发表于 2022-7-5 20:32
谢谢

{:4_190:}

小辣椒 发表于 2022-7-5 21:51

队长这个CSS精灵完成了{:4_178:}

加林森 发表于 2022-7-5 22:00

小辣椒 发表于 2022-7-5 21:51
队长这个CSS精灵完成了

我学会了如何放大了。真开心。谢谢你啦！

小辣椒 发表于 2022-7-5 22:01

加林森 发表于 2022-7-5 22:00
我学会了如何放大了。真开心。谢谢你啦！

队长有收获了{:4_173:}

加林森 发表于 2022-7-5 22:03

小辣椒 发表于 2022-7-5 22:01
队长有收获了

是的。我自己在试，然后请教老黑，老黑说可以的。

红影 发表于 2022-7-6 09:47

马黑黑 发表于 2022-7-5 18:23
移动的是图片。比如，小块要取原始图片的{x,y}的{100,0}，则需要将图片左移 100个像素。

这个其实是图 ...

position 定位是对选择器也是小图的定位，地址后面的其实是对大图的相对定位，我前面搅到一起去了{:4_173:}
页: [1] 2
查看完整版本: 《Hope 22》纯音乐 【学习老黑的CSS精灵 】