Dek-D.com ใช้คุกกี้เพื่อพัฒนาประสบการณ์ของ
ผู้ใช้ให้ดียิ่งขึ้น เรียนรู้เพิ่มเติมที่นี่
ยอมรับ

แจกโค้ดเล่น Effect เลือกตอน

ตั้งกระทู้ใหม่
ตั้งกระทู้ใหม่
มาแจกโค้ดไว้ทำ Effect เล็กๆน้อยๆ ให้มีลูกเล่นเวลาเอาเมาส์ไปเลื่อนในแต่ละตอนให้ดีมีชีวิตชีวามากขึ้นนะครับ

ลองไปดูตัวอย่างได้ที่ 
http://writer.dek-d.com/shalling/writer/view.php?id=1483430



โค้ดที่ใช้นะครับ ตามนี้เลยครับ *มีโค้ดบางบรรทัดถูกลบออกในกระทู้นะครับ ให้เช็คตามรูปที่แนปด้วยครับ



<style>
.chapter-item {
  display: block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.chapter-item:before {
  content: "";
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.chapter-item:hover a, 
.chapter-item:focus a, 
.chapter-item:active a {
  color: #a65311;
}
.chapter-item:hover:before, 
.chapter-item:focus:before, 
.chapter-item:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
 
</style>

แสดงความคิดเห็น

>

1 ความคิดเห็น