นิยาย Secret Celtic RadiO > ตอนที่ 10 : 11 : Dek-D.com

Secret Celtic RadiO

ตอนที่ 10 : 11

เนื้อหานิยายตอนนี้เปิดให้อ่าน
View : 19

จำนวนคนให้กำลังใจ : 1 ครั้ง

26 เม.ย. 58

ก+
ก-

` The cat โค้ดแมวๆ ●

นำโค้ดไปใช้ อย่าลืม คอมเม้น ในตอนนี้เลย
และ อย่าลืม ติดเครดิต ร้านโค้ดแมวๆ ด้วยน้า

CODE

(โค้ดในกล่องนี้สำหรับให้กล่องเพลงอยู่ทางด้านซ้ายมือ)

<div id="klao">
 <img src="http://i.imgur.com/LGhtSZG.gif">
 <div id="line" class="line"></div>
 <div class="play">
 <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/csglyv85dm/3.mp3&t0=K L A O&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
 </div>
 </div>
 
 <style type="text/css">
 
 #klao {
 position: fixed;
 bottom: 20px;
 left: 20px;
 width: 31px;
 height: 31px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 -webkit-transition: all .7s ease;
 -moz-transition: all .7s ease;
 -o-transition: all .7s ease;
 transition: all .7s ease;
 }
 #klao img {
 width: 15px;
 padding: 8px 0px 0px 8px;
 }
 #line {
 position:absolute;
 background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 }
 .line {
 top: 13px;
 left: 30px;
 width: 0px;
 height: 3px;
 -webkit-transition:all .4s ease;
 -moz-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition-delay: 0s;
 -webkit-transition-delay: 0s;
 }
 #klao:hover .line {
 width: 20px;
 -webkit-transition-delay: 0s;
 }
 .play {
 top: 0px;
 left: 50px;
 width: 140px;
 height: 0px;
 padding: 0px 5px 5px 5px;
 overflow: hidden;
 position: absolute;
 text-align: center;
 background: #ffffff; /* player background */
 border-left: 3px solid #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 opacity: 0;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition-delay: .4s;
 -webkit-transition-delay: .4s;
 }
  
 #klao:hover .play {
 height: 25px;
 opacity: 1;
 transition-delay: .6s;
 -webkit-transition-delay: .6s;
 } 
 </style>

อธิบายส่วนประกอบ
ตรง /* ใส่โค้ดสีตรงวงกลมสีชมพู */
คือตรงพื้นหลังทั้งวงกลมสีชมพูและขอบที่ยื่นออกมาสีชมพูน่ะ
แนะนำให้ใส่สีเดียวกันหมดเลยนะขรั่บ จะชมพูก็ชมพูล้วนเลยจ้า

ส่วนเสียงเพลงทำอย่างไร? ให้เข้าไปดูที่ตอนที่ 49 สอนทำกล่องเพลง billy

ทริปเกร๋ ! ฟรีไอค่อนจิ๋วๆ สำหรับเครื่องเล่นดนตรีโดยเฉพาะเยอะแยะมากมาย คลิก

CODE

(โค้ดในกล่องนี้สำหรับให้กล่องเพลงอยู่ตรงเนื้อหา)

<div id="klao">
 <img src="http://i.imgur.com/LGhtSZG.gif">
 <div id="line" class="line"></div>
 <div class="play">
 <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/csglyv85dm/3.mp3&t0=K L A O&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
 </div>
 </div>
 
 <style type="text/css">
 
 #klao {
 position:relative;
 left: 20px;
 width: 31px;
 height: 31px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 -webkit-transition: all .7s ease;
 -moz-transition: all .7s ease;
 -o-transition: all .7s ease;
 transition: all .7s ease;
 }
 #klao img {
 width: 15px;
 padding: 8px 0px 0px 8px;
 }
 #line {
 position:absolute;
 background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 }
 .line {
 top: 13px;
 left: 30px;
 width: 0px;
 height: 3px;
 -webkit-transition:all .4s ease;
 -moz-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition-delay: 0s;
 -webkit-transition-delay: 0s;
 }
 #klao:hover .line {
 width: 20px;
 -webkit-transition-delay: 0s;
 }
 .play {
 top: 0px;
 left: 50px;
 width: 140px;
 height: 0px;
 padding: 0px 5px 5px 5px;
 overflow: hidden;
 position: absolute;
 text-align: center;
 background: #ffffff; /* player background */
 border-left: 3px solid #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */
 opacity: 0;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition-delay: .4s;
 -webkit-transition-delay: .4s;
 }
  
 #klao:hover .play {
 height: 25px;
 opacity: 1;
 transition-delay: .6s;
 -webkit-transition-delay: .6s;
 } 
 </style>