亚伦影音工作室 发表于 2024-12-24 18:05

css路径裁剪制作播放器按钮【首创】

本帖最后由 亚伦影音工作室 于 2024-12-25 06:51 编辑 <br /><br /><style type="text/css">
      .chooseBtn { display: none; }
      .choose-label { top: 10px;
         left: 10px;
            width: 180px;
            height: 180px;
            display: block;background:#000url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/1636bc0d156def96d36aa161a8a722db.jpg)no-repeat center/cover;
            position: relative;
            transition: all 0.3s;
            overflow: hidden; cursor: pointer;clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
.chooseBtn:checked+label {display: block;clip-path: polygon(75% 50%, 0 0, 0 100%);
         transition: all 0.3s}
.choose-label:hover {cursor: pointer;
        background:#ff0000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/59fe12000912119c3ab62e065b7d99e4.jpg)no-repeat center/cover;
}
</style>
<input type="checkbox" name="sex" id="male" class="chooseBtn" />
    <label for="male" class="choose-label"> </label>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
male.onclick = () => aud.paused ?aud.play():aud.pause();
</script >

亚伦影音工作室 发表于 2024-12-24 18:12

如果图片地址失效背景颜色可以代替仍可以显示按钮！

杨帆 发表于 2024-12-24 18:31

新颖的播放器按钮，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2024-12-24 18:42

这个有趣，鼠标触动还能换图片呢。
充分利用了播放器按钮的空间，这个设计很奇妙{:4_199:}

冬天的雨 发表于 2024-12-24 19:34

有创意 赞{:4_178:}

小辣椒 发表于 2024-12-24 21:31

亚伦现在创意多多，精彩不断{:4_199:}

小辣椒 发表于 2024-12-24 21:32

亚伦最好直接做帖里面，这样可以直观显示播放器按钮的效果

小辣椒 发表于 2024-12-24 21:32

亚伦棒棒的！
页: [1]
查看完整版本: css路径裁剪制作播放器按钮【首创】