马黑黑 发表于 2022-1-30 16:37

祝朋友们虎年大吉

本帖最后由 马黑黑 于 2022-1-30 16:45 编辑 <br /><br /><style type="text/css">

.paBox {
        margin: auto;
        width: 720px;
        height: 620px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 4px 4px 8px 2px #000;
        padding: 8px;
}

.imgBox { position: relative; flex-grow: 2; background: rgba(0,0,0,0.8); }
.imgBox img {
        position: absolute;
        top:0; left:0; right:0; bottom:0;
        margin: auto;
        width: 50%;
        height: 50%;
        transition: 1s;
        cursor: pointer;
}
.imgBox img:hover { transform: rotate(360deg) scale(2,2); }
.footBox { height: 100px; display: flex; flex-direction: row; gap: 8px; justify-content: center; }
.footBox img { width: 100px; height: 100px; border-radius: 50%; cursor: pointer; opacity: 0.8; }
.footBox img:hover { opacity:1; }

</style>

<div class="paBox">
        <iframe style="position: absolute; clip-path: circle(33px at 43px 43px); opacity: 0.5;z-index: 666;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=30031502&auto=1&height=66"></iframe>
        <div class="imgBox"><img id="bigpic" src="https://638183.freep.cn/638183/Pic/%E7%80%91%E5%B8%83.jpg" alt="" /></div>
        <div class="footBox">
                <img id="img1" onclick="showpic('img1')" src="https://638183.freep.cn/638183/Pic/2022/tiger1.jpg" alt="" />
                <img id="img2" onclick="showpic('img2')" src="https://638183.freep.cn/638183/Pic/2022/tiger2.jpg" alt="" />
                <img id="img3" onclick="showpic('img3')" src="https://638183.freep.cn/638183/Pic/2022/tiger3.jpg" alt="" />
                <img id="img4" onclick="showpic('img4')" src="https://638183.freep.cn/638183/Pic/2022/tiger4.jpg" alt="" />
                <img id="img5" onclick="showpic('img5')" src="https://638183.freep.cn/638183/Pic/2022/tiger5.jpg" alt="" />
                <img id="img6" onclick="showpic('img6')" src="https://638183.freep.cn/638183/Pic/2022/tiger6.jpg" alt="" />
        </div>
</div>

<script>
var bigpic = document.getElementById('bigpic');
function showpic(id) { bigpic.src = document.getElementById(id).src; }
</script>

加林森 发表于 2022-1-30 17:32

本帖最后由 加林森 于 2022-1-30 17:45 编辑

虎年虎虎生威。老黑的制作真漂亮。赞！{:4_199:}

加林森 发表于 2022-1-30 17:49

花样还挺多的，都可以转圈的，6个老虎都可以直接扑出来的。好玩好玩，又跟到可以学习了。{:4_199:}

加林森 发表于 2022-1-30 17:51

这个播放器变成了自动播放，还可以停止。太好玩了。{:4_190:}

红影 发表于 2022-1-30 20:21

这么多技巧的应用，太棒了。借黑黑好贴，同祝大家虎年快乐{:4_187:}

马黑黑 发表于 2022-1-30 20:44

红影 发表于 2022-1-30 20:21
这么多技巧的应用，太棒了。借黑黑好贴，同祝大家虎年快乐

{:4_187:}

加林森 发表于 2022-1-30 20:49

{:4_191:}{:4_191:}

杨柳青 发表于 2022-1-30 23:08

代码高手在民间~~跑到花潮来了~~{:5_116:}

马黑黑 发表于 2022-1-31 08:29

杨柳青 发表于 2022-1-30 23:08
代码高手在民间~~跑到花潮来了~~

{:4_180:}

加林森 发表于 2022-1-31 09:22

准备过大年了{:4_204:}

马黑黑 发表于 2022-1-31 11:02

加林森 发表于 2022-1-31 09:22
准备过大年了

除夕了，年夜饭不吃面条{:4_170:}

小九 发表于 2022-1-31 12:00

借老黑的帖子，祝福大家新春快乐！阖家团圆！虎年大吉！{:4_204:}

加林森 发表于 2022-1-31 12:05

马黑黑 发表于 2022-1-31 11:02
除夕了，年夜饭不吃面条

今天中午我们家里自己做火锅吃呢。

马黑黑 发表于 2022-1-31 12:45

加林森 发表于 2022-1-31 12:05
今天中午我们家里自己做火锅吃呢。

天冷，火锅是必须的

马黑黑 发表于 2022-1-31 12:45

小九 发表于 2022-1-31 12:00
借老黑的帖子，祝福大家新春快乐！阖家团圆！虎年大吉！

{:4_187:}{:5_108:}

加林森 发表于 2022-1-31 13:18

马黑黑 发表于 2022-1-31 12:45
天冷，火锅是必须的

就是，很成功。

马黑黑 发表于 2022-1-31 13:33

加林森 发表于 2022-1-31 13:18
就是，很成功。

对的

加林森 发表于 2022-1-31 16:45

马黑黑 发表于 2022-1-31 13:33
对的

嗯嗯
页: [1]
查看完整版本: 祝朋友们虎年大吉