css3中animation属性实现箭头向右滚动渐隐的代码
这篇文章给大家介绍的内容是关于css3中animation属性实现箭头向右滚动渐隐的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
这是一个右箭头的小图标。
keyframes 创建一个css3动画用 animation 调用 并用延迟动画的办法 做出匀速滚动的效果。
直接贴上html代码，复制即可运行。
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="webhivers" />
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">
<title>arrow-right</title>
<style>
.container { width: 1000px;margin: 0 auto; }
@keyframes move {
0% {left: 0%; opacity: 0; }
70% { left: 70%; opacity: 1 }
100% {left: 100%;opacity: 0;}
}
.move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}
.ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
.ar-delay-1s{animation-delay:0.1s;}
.ar-delay-2s{animation-delay:0.2s;}
.ar-delay-3s{animation-delay:0.3s;}
.ar-delay-4s{animation-delay:0.4s;}
.ar-delay-5s{animation-delay:0.5s;}
.ar-delay-6s{animation-delay:0.6s;}
.ar-delay-7s{animation-delay:0.7s;}
.ar-delay-8s{animation-delay:0.8s;}
.ar-delay-9s{animation-delay:0.9s;}
.ar-delay-10s{animation-delay:0.10s;}
</style>
</head>
<body>
<!-- Wrapper -->
<div>
<!-- Header -->
<header id="header"></header>
<!-- #Header end -->
<!-- Content -->
<section id="content">
<div>
<div>
<!-- HTML CODE HERE -->
<div>
<!-- <span class="move animated">>>>>>></span> -->
<span style="width:35px;display: block">
<!-- <i class="move animated delay-7s iconfont icon-arrow-right"></i>
<i class="move animated delay-6s iconfont icon-arrow-right"></i>
<i class="move animated delay-5s iconfont icon-arrow-right"></i> -->
<i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i>
<i class="move ar-animated iconfont icon-arrow-right"></i>
</span>
</div>
</div>
</div>
</section>
<!-- #Content end -->
<!-- Footer -->
<footer id="footer"></footer>
<!-- #Footer end -->
</div>
<!-- #Wrapper end -->
</body>
</html>相关推荐：
Atas ialah kandungan terperinci css3中animation属性实现箭头向右滚动渐隐的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Bagaimana untuk mempercepatkan kesan animasi dalam Windows 11: 2 kaedah dijelaskan
Apr 24, 2023 pm 04:55 PM
Apabila Microsoft melancarkan Windows 11, ia membawa banyak perubahan. Salah satu perubahan ialah peningkatan dalam bilangan animasi antara muka pengguna. Sesetengah pengguna ingin mengubah cara sesuatu kelihatan dan mereka perlu mencari cara untuk melakukannya. Mempunyai animasi menjadikannya lebih baik dan lebih mesra pengguna. Animasi menggunakan kesan visual untuk menjadikan komputer kelihatan lebih menarik dan responsif. Sebahagian daripada mereka termasuk menu gelongsor selepas beberapa saat atau minit. Terdapat banyak animasi pada komputer anda yang boleh menjejaskan prestasi PC, memperlahankannya dan mengganggu kerja anda. Dalam kes ini, anda perlu mematikan animasi. Artikel ini akan memperkenalkan beberapa cara pengguna boleh meningkatkan kelajuan animasi mereka pada PC. Anda boleh menggunakan perubahan menggunakan Registry Editor atau fail tersuai yang anda jalankan. Bagaimana untuk menambah baik animasi dalam Windows 11
Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar
Nov 21, 2023 am 09:05 AM
Cara menggunakan CSS untuk melaksanakan kesan animasi imej latar belakang yang berputar bagi elemen kesan animasi imej latar belakang boleh meningkatkan daya tarikan visual dan pengalaman pengguna halaman web. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan imej latar belakang, yang boleh berupa gambar yang anda suka, seperti gambar matahari atau kipas elektrik. Simpan imej dan namakannya "bg.png". Seterusnya, buat fail HTML dan tambahkan elemen div dalam fail, tetapkan kepada
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
css3 apakah itu susun atur penyesuaian
Jun 02, 2022 pm 12:05 PM
Reka letak adaptif, juga dikenali sebagai "susun atur responsif", merujuk kepada susun atur halaman web yang boleh mengecam lebar skrin secara automatik dan membuat pelarasan yang sepadan dengan halaman web sedemikian boleh serasi dengan berbilang terminal berbeza dan bukannya membuat versi khusus untuk setiap terminal. . Reka letak penyesuaian dilahirkan untuk menyelesaikan masalah penyemakan imbas web mudah alih, dan boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza.
