hujung hadapan web
tutorial css
Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi)
Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi)
Dalam artikel sebelumnya "Kemahiran JS lanjutan yang anda patut ketahui (Ringkasan) ", kami belajar tentang kemahiran JS lanjutan. Artikel berikut akan memperkenalkan anda kepada teknik biasa untuk membuat animasi dengan CSS Mari lihat cara melakukannya bersama-sama.
peralihan
Terdapat atribut transition dalam CSS, yang boleh memantau perubahan atribut CSS tertentu melalui kawalan perubahan atribut, Kesan animasi ringkas:
Sifat CSS peralihan ialah sifat trengkas untuk sifat peralihan, tempoh peralihan, fungsi pemasaan peralihan dan kelewatan peralihan. ——Dipetik daripada MDN
kod html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #000;
border-radius: 4px;
/* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
}
</style>
</head>
<body>
<div>
<div>鼠标悬浮查看效果</div>
</div>
</body>
</html>kesan animasi klik di sini untuk melihat alamat https://codepen.io/wjq990112/pen / PoqEemX
Setelah mengalaminya, mari kita bincangkan tentang penggunaan secara terperinci:
kod css
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
Anda mungkin tidak dapat memahaminya jika anda tulis seperti ini, kami akan membongkarnya satu demi satu Penyelesaian:
kod css
transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */ transition-duration: 1s; /* 设定过渡动画的时长 */ transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */ transition-delay: 0.2s; /* 设定触发动画的延迟 */
dan atribut transition terdiri daripada 4 atribut CSS di atas.
Atribut pertama dan kedua diperlukan dan digunakan untuk menentukan atribut mendengar yang perlu menambah animasi peralihan dan menentukan tempoh animasi.
Atribut ketiga dan keempat adalah pilihan dan digunakan untuk menetapkan kesan dan kelewatan animasi peralihan.
Untuk butiran tentang nilai pilihan fungsi pemasaan peralihan, lihat
https://developer.mozilla.org/zh-CN/docs/Web/CSS /transition-timing- function
Atribut pertama juga mempunyai 2 nilai istimewa: tiada: jangan dengar sebarang atribut semua: dengar semua atribut dan tambah animasi peralihan padanya.
Apabila atribut ketiga diabaikan, item kali kedua akan dihuraikan secara automatik sebagai kelewatan kesan animasi.
Ia masih agak sukar untuk difahami, mari kita berikan contoh:
kod css
Contoh di atas adalah sebahagian daripada kod sebelumnya. bermaksud mendengar perubahan dalamperalihan: latar belakang 1s mudah-masuk-keluar 0.2s; >
dan menambah animasi peralihan 1 saat padanya Kesan animasi peralihan ialah ia bermula perlahan dan berakhir dengan perlahan, dan mula melaksanakan selepas atribut berubah selama 0.2. detik. background
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #000;
border-radius: 4px;
/* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
} dalam kod menambah animasi peralihan kepada transition masing-masing ketiga-tiga atribut teg background``color``width ini berubah, kesan animasi lalai atau yang ditentukan akan ditambahkan secara automatik padanya. class=box
Kaedah penutup mata. overflow
penukaran: Tab
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
}
#tabs {
display: flex;
width: 200px;
height: 100px;
transition: transform 0.3s;
}
.tab-pane-1 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: red;
}
.tab-pane-2 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: yellow;
}
.transform {
transform: translateX(-50%);
}
</style>
</head>
<body>
<div>
<div id="tabs">
<div>1</div>
<div>2</div>
</div>
</div>
<button onclick="switchTabPane()">切换Tab</button>
<script>
function switchTabPane() {
var el = document.getElementById('tabs')
el.className = el.className ? '' : 'transform'
}
</script>
</body>
</html>kesan animasi klik di sini untuk melihat https://codepen . io/wjq990112/pen/MWwrXWoUntuk mencapai kesan ini, anda hanya perlu menetapkan bekas kepada
;, dan kemudian gunakan overflow: hidden untuk menggunakan tabmendengartransform atribut dalam bekas Gerakkannya ke arah paksi transform: translateX() dan anda selesai. X
untuk berputar pada satah penyemak imbas Secara lalai adalah untuk berputar dengan pusat geometri sebagai titik tengah. Penggunaan atribut transform: rotateZ();
adalah serupa dengan animation Biar saya memperkenalkannya secara terperinci seterusnya. transition
Sifat CSS animasi ialah nama animasi, tempoh animasi, fungsi pemasaan animasi, kelewatan animasi, kiraan lelaran animasi, arah animasi, mod isian animasi dan animasi- mainkan Borang atribut singkatan untuk atribut -state.Mula-mula cuba kesan putaran mudah: kod html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}
.rotate {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: red;
/* 为元素设定 10s 的旋转动画 */
animation: rotate 10s linear infinite;
}
.wrapper {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<div>旋转</div>
</div>
</body>
</html>Klik di sini untuk melihat kesan animasi https: // codepen.io/wjq990112/pen/mdJXeqmIni ialah animasi putaran asas, menggunakan
dan animation dua sifat CSS yang biasa digunakan untuk animasi. keyframes
animasi
Sekarang mari kita bercakap tentang penggunaan asas: kod cssanimation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
animation-name: rotate; /* 自定义 keyframes 名 */ animation-duration: 10s; /* 设定单次过渡动画时长 */ animation-timing-function: linear; /* 设定单次过渡动画效果 */ animation-delay: 0s; /* 设定单次过渡动画延迟时间 */ animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */ animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */ animation-fill-mode: none; /* 设定过渡动画的填充模式 */ animation-play-state: running; /* 设定过渡动画运行或停止 */
dan animation-direction boleh dikatakan sebagai dua atribut yang paling sukar untuk difahami: animation-fill-mode
/* * normal: 按照 keyframes 设定的动画方向运行 * reverse: 按照 keyframes 设定的动画方向的反方向运行 * alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行 * alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* * none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态 * forwards: 动画结束后停留在动画的最后一帧 * backwards: 动画开始前停留在动画的第一帧 * both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧 */ animation-fill-mode: none | forwards | backwards | both;
. MDN
keyframes
Properti CSS ini, saya percaya pelajar yang telah mempelajari beberapa penghasilan animasi mudah mesti faham bahawa ia sangat mudah, ia adalah keyframe. Tetapkan bingkai utama untuk animasi dan CSS akan mengisi laluan gerakannya secara automatik. kod css@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。
不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。
通常情况下，keyframes会与animation配合使用。
讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：
请你使用 CSS 实现一个方块来回移动，无限循环。
这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：
/*
* ①
*/
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 1s linear infinite;
}
/*
* ②
*/
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 0.5s linear infinite alternate;
}推荐学习：CSS视频教程
Atas ialah kandungan terperinci Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi). 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
1378
52
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
