css3delete

Di sini saya akan memperkenalkan kepada anda kesan pemadaman dalam CSS3 untuk mengoptimumkan reka bentuk web dengan lebih baik.

CSS3 ialah versi CSS yang dipertingkatkan, yang memperkenalkan banyak ciri dan kesan baharu, termasuk kesan pemadaman. Mula-mula, lihat gaya coretan asli dalam CSS3:

text-decoration: line-through;

Gaya ini akan menambah garis tengah pada teks, menunjukkan bahawa teks telah dipadamkan.

Walau bagaimanapun, kesan coretan ringkas ini tidak lagi cukup keren. Kami memerlukan beberapa kesan coretan yang lebih kreatif untuk menjadikan halaman web kami lebih cantik.

Dalam CSS3, kita boleh menggunakan elemen pseudo (::before dan ::after) dan animasi CSS untuk mencipta pelbagai kesan pemadaman.

Di bawah, kami memperkenalkan beberapa kesan pemadaman yang biasa digunakan.

1. Slash strikethrough

Slash strike through ialah kesan coretan yang agak mudah, yang dicapai dengan menetapkan gaya ::before elemen pseudo.

text-decoration: none;
position: relative;
&::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 14px;
    color: #666;
    opacity: 0.5;
    transition: all .3s ease;
}
&:hover::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg);
}

Dalam kod di atas, kami menetapkan gaya coretan asal kepada none, kemudian tetapkan elemen induk kepada position: relative, tambah ::before elemen pseudo dan tetapkan content kepada A isyarat tebas. Seterusnya, selaraskan isyarat slash ke tengah melalui atribut offset dan transform, dan tetapkan kesan ketelusan dan animasi. Apabila tetikus melayang di atas elemen induk, kesan putaran garis miring dicapai dengan menetapkan gaya elemen pseudo dan atribut transition.

2. Morentas menegak

Morentas menegak juga merupakan kesan yang agak mudah Selain menggunakan elemen pseudo ::before, kita juga boleh menggunakan elemen pseudo ::after. .

text-decoration: none;
position: relative;
&::before, &::after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #666;
    transition: all .3s ease;
}
&::before {
    left: -6px;
}
&::after {
    right: -6px;
}
&:hover::before, &:hover::after {
    height: 100%;
}

Dalam kod di atas, kami juga menetapkan gaya coretan asal kepada none, kemudian tetapkan elemen induk kepada position: relative dan tambah ::before dan ::after elemen pseudo. Seterusnya, capai kesan animasi dengan menetapkan gaya dan atribut transtion unsur pseudo. Apabila tetikus melayang di atas elemen induk, tetapkan ketinggian elemen pseudo agar sama dengan elemen induk dengan menetapkan gaya, dan kemudian perlahan-lahan paparkan kesan coretan menegak.

3. Membakar coretan

Membakar coretan ialah kesan menarik yang memerlukan penggunaan animasi CSS3 untuk mencapainya.

text-decoration: none;
position: relative;
&::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 2px;
    background-color: #666;
    animation: burn .5s linear infinite;
}
@keyframes burn {
    0% {
        opacity: 1;
        width: 0;
    }
    50% {
        opacity: 1;
        width: 100%;
    }
    100% {
        opacity: 0;
        width: 100%;
    }
}

Dalam kod di atas, kami juga menetapkan gaya coretan asal kepada none, kemudian tetapkan elemen induk kepada position: relative dan tambah ::before elemen pseudo. Seterusnya, kesan membakar coretan dicapai dengan menetapkan gaya dan kesan animasi unsur pseudo Kata kunci keyframes menentukan tiga bingkai utama dalam animasi, iaitu 0%, 50% dan 100%. Capai kesan pembakaran dengan mengurangkan ketelusan secara beransur-ansur dan meningkatkan lebar.

4. Cross through

Cross through ialah kesan yang agak kompleks yang memerlukan bantuan berbilang unsur pseudo dan kedudukan mutlak untuk dicapai.

text-decoration: none;
position: relative;
&::before, &::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0;
    transition: all .3s ease;
    background-color: #666;
}
&::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
&::after {
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
}
&:hover::before {
    left: 50%;
    width: 50%;
}
&:hover::after {
    right: 50%;
    width: 50%;
}

Dalam kod di atas, kami juga menetapkan gaya coretan asal kepada none, kemudian tetapkan elemen induk kepada position: relative dan tambah ::before dan ::after elemen pseudo. Seterusnya, capai kesan animasi dengan menetapkan gaya elemen pseudo dan atribut transition. Apabila tetikus melayang di atas elemen induk, tetapkan gaya elemen pseudo untuk mengimbangi lebarnya kepada 0 dan gunakan offset untuk membuat dua hujungnya bersilang menjadi kesan coretan.

Di atas ialah pengenalan kepada beberapa kesan pemadaman biasa dalam CSS3. Saya harap ia akan membantu semua orang. Dalam reka bentuk web sebenar, kita boleh memilih kesan pemadaman yang berbeza mengikut keperluan khusus untuk mencapai kesan halaman yang lebih sejuk.

Atas ialah kandungan terperinci css3delete. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!