Bagaimana untuk mencipta kesan animasi panggilan menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mencipta kesan animasi panggilan menggunakan CSS?

WBOY

Lepaskan： 2023-09-02 16:01:02

ke hadapan

1618 orang telah melayarinya

Bagaimana untuk mencipta kesan animasi panggilan menggunakan CSS?

Cascading Style Sheets (CSS) membolehkan pembangun mencipta kesan visual untuk halaman web anda untuk menjadikannya menarik dan mesra pengguna. CSS menyediakan pelbagai sifat seperti warna, flexbox, grid, animasi, bayang-bayang, dan lain-lain untuk menggayakan elemen untuk membentuk laman web yang menarik dan mesra pengguna kepada ramai pengguna.

Dalam artikel ini, kami membincangkan cara mencipta kesan animatronik menggunakan reka bentuk HTML dan CSS. Untuk mencipta kesan ini, kami akan menggunakan sifat animasi CSS dan sifat kotak-bayang.

Animasi CSS

Ia membolehkan pembangun menambah kesan animasi seperti pergerakan, getaran, dll. pada halaman web kami untuk meningkatkan nilai estetik.

Tatabahasa

animation: animation-name | animation-duration | speed;

Salin selepas log masuk

Css Box-shadow Property

Ia membolehkan pembangun menyediakan rona gelap pada satu sisi dan rona terang pada sebelah lagi.

Tatabahasa

box-shadow: values;

Salin selepas log masuk

Nilai atribut ini ialah -

Tiada - Tiada bayang-bayang dipaparkan pada elemen. Ini ialah nilai lalai.
Offset-X − Jarak bayang-bayang daripada unsur dalam arah mendatar. Nilai positif untuk offset-X akan mengeluarkan bayang di sebelah kanan elemen, manakala nilai negatif akan membuang bayang di sebelah kiri elemen.
Offset-Y − Mengawal jarak menegak bayang-bayang daripada elemen. Nilai positif meletakkan bayang di atas elemen, nilai negatif meletakkan bayang di bawah elemen.
Blur Radius - Ia menentukan ketajaman bayang-bayang. Semakin tinggi angkanya, semakin kabur bayangannya, bermakna bayang-bayang itu akan menjadi lebih besar dan lebih cerah
Spread- jejari - Ia menentukan saiz bayang-bayang. Jika nilainya positif, saiznya bertambah. Jika negatif, saiznya dikurangkan.
Warna - Ia menentukan warna bayang-bayang.
Inset − Ia membolehkan pembangun mencipta bayang-bayang supaya kandungan elemen kelihatan berada di bawah sempadan. Oleh itu, bayang-bayang dicipta dalam sempadan.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo {
         border: 5px solid;
         padding: 10px 15px;
         box-shadow: -5px -10px 0px 5px yellow;
      }
   </style>
</head>
<body>
   <h1>The box-shadow property</h1>
   <article id="demo">
      <p>This is an article element with a shadow. It contains four values that are offset-X (horizontal distance), offset-Y (vertical distance), spread radius and color. </p>
   </article>
</body>
</html>

Salin selepas log masuk

Buat kesan animasi panggilan masuk

Dalam contoh di bawah, kami cuba memaparkan ikon dering telefon menggunakan ikon CSS Font Awesome.

Kemudian, kami telah menggunakan sifat kotak-bayang dan animasi CSS untuk mencipta kesan deringan Untuk mengawal urutan animasi, kami telah menggunakan @keyframes

Contoh

Terjemahan bahasa Cina ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Incoming Call Animation</title>
   <link rel="stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
   <style>
      body{
         height: 80%;
         margin: 10px;
         padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background: black;
      }
      section{
         position: absolute;
         top: 10%;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 2px solid orange;
         height: 65%;
         width: 40%;
      }
      .call{
         position: relative;
         background: black;
         color: orange;
         font-size: 35px;
         font-weight: bold;
         width: 70px;
         height: 70px;
         border-radius: 100%;
         border: solid 5px black;
         animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
      }
      .img{
         position: absolute;
         top: 20px;
         left: 20px;
         height: 60px;
         width: 50px;
      }
      @keyframes anim {
         0% {
            box-shadow: 0 1px 0 4px #ffffff;
         }
         10%{
            box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
         }
         25% {
            box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
         }
         50% {
            box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1),  0 2px 5px 23px rgba(248, 248, 255, 1);
         }
      }
      @keyframes vibration {
         0% { transform: rotate(0deg); }
         25% { transform: rotate(20deg); }
         50% { transform: rotate(0deg); }
         75% { transform: rotate(-15deg); }
         100% { transform: rotate(0deg); }
      }
   </style>
</head>
<body>
   <section>
      <div class= "call">
         <i class= "fas fa-solid fa-phone img"> </i>
      </div>
   </section>
</body>
</html>

Salin selepas log masuk

Ikon panggilan masuk akan dipaparkan pada halaman web dan kesan deringan akan diperhatikan oleh kesan animasi.

Kesimpulan

Pelanggan dalam pasaran teknologi moden memerlukan lebih banyak penyertaan laman web. Pada ketika ini, animasi memainkan peranan penting dalam meningkatkan komunikasi. Sifat interaktif animasi menggalakkan interaksi pengguna dan meningkatkan pengalaman pengguna. Jika anda mahu tapak web anda menonjol daripada persaingan dan disayangi oleh khalayak sasaran anda pada masa yang sama, maka mengupah syarikat pembangunan tapak web terkemuka untuk menambah animasi pada tapak web anda akan membantu.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan animasi panggilan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!