ວິທີການລະຫັດຜົນກະທົບຂອງຂໍ້ຄວາມທີ່ສະຫຼາດກັບ CSS

ເນື້ອຫາ

• 01. ຜົນກະທົບຂອງຕົວ ໜັງ ສື Rollover
• 02. ສ້າງ CSS
• 03. ຕຳ ແໜ່ງ ຄຳ
• 04. ຂຶ້ນແລະລົງ
• 05. ເລື່ອນລົງ
• 06. ອັດຕະໂນມັດ ສຳ ລັບປະຊາຊົນ
• 07. ເພີ່ມຫ້ອງຮຽນແທນ

ການເຊື່ອມຕໍ່ Rollover ແມ່ນວິທີທີ່ດີທີ່ຈະດຶງດູດຄວາມສົນໃຈຂອງຜູ້ໃຊ້, ໂດຍສະເພາະຖ້າພວກເຂົາເຮັດສິ່ງທີ່ຜິດປົກກະຕິຫລືຕົ້ນສະບັບ. ເດັກກາງມີຜົນດີ, ບໍ່ຄ່ອຍໄດ້ເຫັນຢູ່ບ່ອນອື່ນ, ເຊິ່ງຈັບເອົາຕົວອັກສອນແຕ່ລະຕົວແລະແຍກອອກຈາກກັນດ້ວຍພາບເຄື່ອນໄຫວ, ເຊິ່ງເຕະໃນເວລາທີ່ນັກທ່ອງທ່ຽວຫຼອກລວງ ຄຳ. ພາບເຄື່ອນໄຫວຊ່ວຍເຮັດໃຫ້ມີລັກສະນະການຫຼີ້ນຂອງຍີ່ຫໍ້ແຊນວິດ.

ໃນບົດຂຽນນີ້, ພວກເຮົາສະແດງວິທີການສ້າງຜົນກະທົບ ໃໝ່ ໃນເວັບໄຊທ໌້ຂອງທ່ານ. ເພື່ອເປັນແຮງບັນດານໃຈເພີ່ມເຕີມ, ໃຫ້ເບິ່ງທີ່ຄູ່ມືຂອງພວກເຮົາກ່ຽວກັບຕົວຢ່າງພາບເຄື່ອນໄຫວ CSS ທີ່ດີທີ່ສຸດ (ມີ ຄຳ ແນະ ນຳ ກ່ຽວກັບວິທີການລະຫັດພວກມັນ). ສຳ ລັບບາງສິ່ງບາງຢ່າງທີ່ແຕກຕ່າງກັນເລັກ ໜ້ອຍ, ລອງສ້າງຜູ້ສ້າງເວັບໄຊທ໌ຊັ້ນ ນຳ ຫລືເລືອກເອົາບ່ອນເກັບຂໍ້ມູນຟັງທີ່ດີທີ່ສຸດ. ແລະຖ້າທ່ານ ກຳ ລັງເຮັດໃຫ້ເວບໄຊທ໌ຂອງທ່ານສັບສົນກວ່າ, ໃຫ້ແນ່ໃຈວ່າເວບໄຊທ໌ໂຮດຕິ້ງຂອງທ່ານ ກຳ ລັງຢູ່.

01. ຜົນກະທົບຂອງຕົວ ໜັງ ສື Rollover

ໜຶ່ງ ໃນຜົນກະທົບຂອງຕົວ ໜັງ ສືທີ່ດີໃນເວັບໄຊທ໌ເດັກນ້ອຍກາງແມ່ນ ສຳ ລັບຜົນກະທົບທີ່ມີຢູ່ໃນເມນູ, ບ່ອນທີ່ຕົວອັກສອນແຍກອອກຈາກຂໍ້ຄວາມແລະ ໝຸນ ເລັກນ້ອຍ. ເລີ່ມຕົ້ນນີ້ດ້ວຍບາງ HTML ງ່າຍໆ.

div> div> ອາຫານເຊົ້າ / div> / div>

02. ສ້າງ CSS

ໃຊ້ເອກະສານ CSS ແບບແຍກຕ່າງຫາກຫຼືແທັກຮູບແບບເພື່ອເພີ່ມກົດ CSS ດັ່ງຕໍ່ໄປນີ້ແລະເຮັດໃຫ້ ໜ້າ ເວັບເຕັມສ່ວນຂອງຕົວທ່ອງເວັບໂດຍການຮັບປະກັນຮ່າງກາຍແລະເຄື່ອງຫໍ່ເອົາຄວາມສູງເຕັມທີ່ໃຊ້ໄດ້.

body {ຄວາມກວ້າງ: 100%; ລະດັບຄວາມສູງ: 100%; ຂອບ: 0; ແຜ່ນຮອງ: 0; } .wrapper {ສະແດງ: ຕາຂ່າຍໄຟຟ້າ; ລະດັບຄວາມສູງ: 100%; }

03. ຕຳ ແໜ່ງ ຄຳ

ທ ຄຳ ສູນກາງ ຄຳ ສັບໃນຕາຂ່າຍໄຟຟ້າ. ບົດເລື່ອງໃດກໍ່ຕາມທີ່ມອບໃຫ້ ຄຳ ຫ້ອງຮຽນສາມາດນໍາໃຊ້ນີ້. ທ ເຖິງ ຫ້ອງຮຽນຈະຖືກ ນຳ ໃຊ້ກັບທຸກໆຈົດ ໝາຍ ອື່ນໆແລະສິ່ງເຫລົ່ານີ້ຈະກ້າວຂຶ້ນໄປຂ້າງເທິງ.

.word {font-size: 3em; ຂອບ: auto auto; } .word .up {ສະແດງ: inline-block; transform: translate3d (0px, 0px, 0px) ຫມຸນ (0deg); ການຫັນປ່ຽນ: ທຸກ 0.5s ສະດວກໃນການອອກ; }

04. ຂຶ້ນແລະລົງ

ດຽວນີ້ ລົງ ຫ້ອງຮຽນແບ່ງປັນການຕັ້ງຄ່າທີ່ຄ້າຍຄືກັນກັບ ເຖິງ ແຕ່ hover ໄດ້ສະແດງໃຫ້ເຫັນການເຄື່ອນໄຫວຂຶ້ນໄປຂ້າງເທິງ ສຳ ລັບ ເຖິງ ໂລດ. ດ້ານເທິງກໍ່ມີການ ໝູນ ວຽນເລັກນ້ອຍເພື່ອເພີ່ມຄວາມງາມ.

.word .down {ສະແດງ: inline-block; transform: translate3d (0px, 0px, 0px) ຫມຸນ (0deg); ການຫັນປ່ຽນ: ທຸກ 0.5s ສະດວກໃນການອອກ; } .word: hover .up {ການປ່ຽນແປງ: translate3d (0px, -8px, 0px) ໝູນ (12deg); ສີ: # 058b05}

05. ເລື່ອນລົງ

ເມື່ອຜູ້ໃຊ້ມີຄວາມຮັກຕໍ່ຂໍ້ຄວາມ, ຊັ້ນຮຽນຈະຍ້າຍຂໍ້ຄວາມລົງໄປ. ຕໍ່ມາໃນ JavaScript ຂໍ້ຄວາມຈະຖືກແບ່ງອອກເປັນເຂດແຍກຕ່າງຫາກໂດຍມີການເພີ່ມຊັ້ນຮຽນໂດຍອັດຕະໂນມັດເພື່ອສະຫຼັບ.

.word: hover .down {transform: translate3d (0px, 8px, 0px) ຫມຸນ (-12deg); ສີ: # 058b05; }

06. ອັດຕະໂນມັດ ສຳ ລັບປະຊາຊົນ

ມັນເປັນເລື່ອງຫຍຸ້ງຍາກທີ່ຈະຕ້ອງເອົາທຸກໆຕົວອັກສອນເຂົ້າໃນການສະຫຼັບສະເພາະກັບຊັ້ນຮຽນທີ່ແຕກຕ່າງກັນ, ດັ່ງນັ້ນພວກເຮົາຈະເຮັດໃຫ້ຂັ້ນຕອນອັດຕະໂນມັດໂດຍການໄດ້ຮັບ JavaScript ເພື່ອສອບຖາມຜູ້ເລືອກແລະເອົາຈົດ ໝາຍ ແຕ່ລະຕົວ. ທີ່ນີ້ str ຕົວແປທີ່ຈັບຕົວອັກສອນປັດຈຸບັນຍ້ອນວ່າມັນລອກຕົວ ໜັງ ສື.

script> var elements = document.querySelectorAll ('.word'); ສຳ ລັບ (var i = 0, l = Element.length; i l; i ++) {var str = elements [i] .textContent; ອົງປະກອບ [i] .innerHTML = '';

07. ເພີ່ມຫ້ອງຮຽນແທນ

ບັດນີ້ອີກວົງ ໜຶ່ງ ວາງຕົວ ໜັງ ສືແຕ່ລະອັນຢູ່ໃນສ່ວນປະກອບຂອງມັນເອງແລະເພີ່ມທັງ ເຖິງ ຫຼື ລົງ ຫ້ອງຮຽນໃນຂອບເຂດຂອງ. ຖ້າທ່ານເບິ່ງສິ່ງນີ້ຢູ່ໃນໂປຣແກຣມທ່ອງເວັບທ່ານຈະເຫັນຂໍ້ຄວາມທີ່ແບ່ງປັນໂດຍແຕ່ລະຕົວອັກສອນຂື້ນແລະລົງ, ໃນຂະນະທີ່ ໝຸນ ເລັກນ້ອຍ.

ທ່ານສາມາດເຫັນຜົນໃນການປະຕິບັດງານຢູ່ໃນເວັບໄຊທ໌ຂອງເດັກກາງ.

ສຳ ລັບ (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); ອົງປະກອບ [i] .appendChild (spn); spn.textContent = str [j]; let pos = (j% 2) ບໍ? 'ຂຶ້ນ​ລົງ'; spn.classList.add (pos); }} / ສະຄິບ>

ບົດຂຽນນີ້ຖືກລົງໃນເບື້ອງຕົ້ນໃນວາລະສານອອກແບບສ້າງສັນ ຜູ້ອອກແບບເວບໄຊທ໌.ຊື້ເລກທີ 286 ຫຼື ຈອງ.