นิยาย Secret Celtic RadiO > ลำดับตอนที่ #10 : 11 : Dek-D.com

ลำดับตอนที่ #10

Secret Celtic RadiO

ลำดับตอนที่ #10 : 11

อัปเดตล่าสุด 26 เม.ย. 58

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

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

CODE

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

#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

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

#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>