Cara buat animation heading dalam Website WordPress Anda

You Read

Cara membuat heading animasi di Website , ianya mudah dengan hanya menambahkan code CSS yang telah di sediakan dalam website kami atau pun boleh copy seperti code di bawah

Table of Contents

Cara membuat heading animasi di Website , ianya mudah dengan hanya menambahkan code CSS yang telah di sediakan dalam website kami atau pun boleh copy seperti code di bawah:

:root{
    --myText : 'DEMO';
    --textColor: #2CFF99;
    --textStroke: 2px;
    --anDuration: 6s;
}
selector{
    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}
selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

Buka Satu page yang baru

 Contoh Page “ DEMO ”

Buka satu section di elementor dan masukkan Heading di dalam Colum tersebut.

Heading text 1

Click (+) Add Colum

Klik Butang Plus (+) Untuk bina section, terdapat section yang ada 1 colum, 2 colum & pelbagai

text hheading 2

Colum With Minimum Height (100vh) and insert Heading Text

Masukkan Heading Text di dalam Colum.

Di Sini sebagai ” DEMO”

text heading 3

Buatkan 1 section dan tekan plus (+) masukkan heading ke dalam colum.

  • Pergi ke style dan tukar warna background Gelap (Navy Blue)
text heading 4

Selepas itu massukkan code css yang di berikan ke dalam advance dalam ruangan CSS hanya terdapat pada elementor Pro Sahaja.

text heading 5

Finally siap sepenuh nya untuk heading animation text di WordPress ini.

text heading 6

Sampai di sini sahaja perkongsian untuk masa ini.

anda boleh layarai Jika berminat nakdapatkan Website dengan Kami.

Klik Di Sini

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
简体中文EnglishBahasa Melayu

Hye Saya mempunyai kebolehan dan kefahaman dalam pelbagai bidang dalam talian seperti pemasaran digital, pereka laman web & pembangun fronted end, kebolehan untuk fokus membangunkan pelbagai jenis laman web menggunakan WordPress dan elementor pembina tema serta pengurusan media sosial dan reka bentuk grafik. . 

Get Free eBook From Us!
Wait !!
Download eBook From Us For Free

Wait a minute, Gifts for our visitors, Download with free knowledge of benefits