回忆 发表于 2022-1-26 23:08

套用小辣椒css制作


<style type="text/css">
.mnBox {
      position: relative;
      margin: 0 auto;
      padding: 35px;
      width: 640px;
      border: none;
      border-top: 6px solid #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #b3c3c3;
}
.ctBox {
      margin: 0;
      padding: 30px;
      background: #fff;
      min-height: 300px;
      border-radius: 10px;
      box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 32px;
      height: 32px;
      outline: none;
      border: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png') no-repeat;
      cursor: pointer;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
      opacity: 0.95;
      box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}

.picBtn:active {
      opacity: 0.8;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}

</style>

<div class="mnBox">
      <div class="ctBox">

            <p><img alt="354 height="501"="" src="http://image.hnol.net/c/2021-12/01/13/20211201135423961-5087368.gif" /></p>
         
                <h2 style="padding-bottom: 10px;">探戈-昨夜星辰</h2>
               
                <h2 style="text-align:center;">TO：小辣椒</h2>
                <pre>

                学习小辣椒的css代码制作

               一曲探戈送给小辣椒

                祝小辣椒春节快乐

                回忆已经忘记光了

                套用练习一下

               



                </pre>

            <div style="position:absolute; width:120px; left:300px; top: 900px; text-align:center;">

      <p ><font color="#222222" size="2" >

               <marqueescrollamount="2" direction="left" >探戈-昨夜星辰</marquee>


   <div style="position:absolute; width:150px; left:-10px; top: 50px; text-align:center;">

               <p><audio id="music" src="https://www.80wp.com/wj/3005271/836a50bcaf7e25f61e40014c12847f7a.mp3" loop="loop" autoplay="autoplay" ></audio> </p>
                <p><button id="picBtn" class="picBtn"></button></p><br>


                <p>回忆2022 01 26</p>






            </div>
         </div>
      </div>
</div>



<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')";
})

</script> </div><br><br><br>

回忆 发表于 2022-1-26 23:09

@小辣椒

红影 发表于 2022-1-27 09:19

回忆这个播放按钮居中和滚动字大小调节都很恰当，这个做得很漂亮，给回忆点赞{:4_187:}

马黑黑 发表于 2022-1-27 09:34

歌好听，舞好看，帖子漂亮清爽。

祝回忆虎年虎虎生威万事顺意！

樵歌 发表于 2022-1-27 11:49

回忆小帅哥帅呆了，做的帖子也光明漂亮，里面的小美美和你正好天生一对儿。{:4_178:}

樵歌 发表于 2022-1-27 11:50

里面跳舞的就是小辣椒。{:4_174:}

加林森 发表于 2022-1-27 12:07

回忆这个帖子真美，制作得太漂亮了。赞！
祝回忆春节快乐！
页: [1]
查看完整版本: 套用小辣椒css制作