Բովանդակություն:

Որո՞նք են սավառնող էֆեկտները:
Որո՞նք են սավառնող էֆեկտները:

Video: Որո՞նք են սավառնող էֆեկտները:

Video: Որո՞նք են սավառնող էֆեկտները:
Video: 10 ընտանիք, որոնք կառավարում են աշխարհը 2024, Դեկտեմբեր
Anonim

Հովերի էֆեկտ Փոփ և ֆոնային անիմացիա: Հովերի էֆեկտ ապրանքի համար։ Պատկերը դուրս է գալիս վեր ու վար, այնուհետև ֆոնը դուրս է սահում և շարժվում:

Նաև գիտեք, թե ինչպես եք տեքստը ցույց տալիս, երբ նկարը սավառնում է:

Ինչպես ցուցադրել անիմացիոն տեքստը պատկերի վրա Hover-ում՝ օգտագործելով միայն CSS3

  1. Ստեղծեք HTML¶ Ավելացրեք ձեր պատկերը՝ օգտագործելով

    պիտակը և տեքստը: Նախ, դուք պետք է ավելացնեք ձեր պատկերը՝ օգտագործելով

    հատկորոշել.

  2. Ստեղծեք CSS¶ Set:hover ընտրիչ: Հովերի էֆեկտը սահմանվում է:hover կեղծ դասի միջոցով, որն ընտրում և ոճավորում է տարրը:

Մեկը կարող է նաև հարցնել՝ ինչպե՞ս եք օգտագործում hover-ը: :hover ընտրիչն օգտագործվում է տարրեր ընտրելու համար, երբ մկնիկը սեղմում եք դրանց վրա:

  1. Հուշում.:hover ընտրիչը կարող է օգտագործվել բոլոր տարրերի, ոչ միայն հղումների վրա:
  2. Հուշում. Օգտագործեք:link ընտրիչը՝ չայցելված էջերի հղումները ոճավորելու համար,:visited ընտրիչը՝ այցելված էջերի հղումները ոճավորելու համար, և:active ընտրիչը՝ ակտիվ հղումը ոճավորելու համար:

Այսպիսով, ինչպե՞ս եք սավառնում պատկերը CSS-ում:

Պատասխան. Օգտագործեք CSS background-image հատկությունը

  1. Փոխեք պատկերը Hover-ում CSS-ում
  2. .քարտ {
  3. լայնությունը՝ 130px;
  4. բարձրությունը՝ 195px;
  5. ֆոն՝ url ("images/card-back.jpg") առանց կրկնության;
  6. ցուցադրում: inline-block;
  7. }

Ինչպե՞ս ազատվել սավառնակից:

Հովերի էֆեկտն անջատելու համար ես երկու առաջարկ ունեմ

  1. եթե ձեր սավառնող էֆեկտը գործարկվում է JavaScript-ի միջոցով, պարզապես օգտագործեք $: unbind ('save');
  2. եթե ձեր սավառնող ոճը գործարկվում է դասի կողմից, ապա պարզապես օգտագործեք $: removeClass ('hoverCssClass');

Խորհուրդ ենք տալիս: