css如何实现幻灯片效果
Apr 15, 2021 pm 04:14 PM
css
tayangan slaid
实现方法:首先定义多张幻灯片元素;然后使用“@keyframes”规则和animation属性定义动画;接着在动画中根据幻灯片数量定义关键帧;最后在关键帧中使用“transform:translateX()”样式实现切换效果。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
通过transfrom属性进行2D转换
html代码:
<section id=box> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> </ul> </section>
Salin selepas log masuk
css代码:
<style> * { margin: 0; padding: 0; font-family: 微软雅黑; list-style: none; } #box{ width:400px; height:200px; border: 1px solid #000; margin: 50px auto; overflow: hidden; } ul{ width: 2000px; animation: dh 10s infinite ease; } ul li{ width:400px; height:200px; float: left; } ul li:nth-child(1){ background:#4b86db; } ul li:nth-child(2){ background:#ff9999; } ul li:nth-child(3){ background:olivedrab; } ul li:nth-child(4){ background:skyblue; } ul li:nth-child(5){ background:#4b86db; } @keyframes dh { 0%{transform: translateX(0)} 25%{transform: translateX(-400px)} 50%{transform: translateX(-800px)} 75%{transform: translateX(-1200px)} 100%{transform: translateX(-1600px)} } </style>
Salin selepas log masuk
推荐学习:css视频教程
Atas ialah kandungan terperinci css如何实现幻灯片效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD

Alat panas Tag

Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD

Tag artikel 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

Apakah maksud pemegang tempat dalam vue

Bagaimana untuk menulis ruang dalam vue

Bagaimana untuk mendapatkan dom dalam vue

Bagaimana untuk memperkenalkan imej ke dalam vue

Bagaimana untuk membungkus prompt dalam js
