Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan animasi pembesaran dan pengurangan fon dalam css3
Bagaimana untuk melaksanakan animasi pembesaran dan pengurangan fon dalam css3
- 青灯夜游asal
- 2022-03-15 15:41:416359semak imbas
Kaedah pelaksanaan: 1. Gunakan peraturan "@keyframes" dan pernyataan "transform:scale(scale);" untuk mencipta animasi pembesaran dan pengurangan fon 2. Gunakan "font element {animation: animation name time infinite;} ” pernyataan menggunakan animasi penskalaan pada elemen fon.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam css, anda boleh menggunakan atribut animation, peraturan "@keyframes" dan transform: scale() untuk melaksanakan animasi pembesaran dan pengurangan fon
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*css部分*/
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1);/*开始为原始大小*/
}
25% {
transform: scale(1.5);/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.5);
}
}
.ballon {
width: 150px;
height: 200px;
margin: 100px auto;
-webkit-animation-name: scaleDraw;/*关键帧名称*/
-webkit-animation-timing-function: ease-in-out;/*动画的速度曲线*/
-webkit-animation-iteration-count: infinite;/*动画播放的次数*/
-webkit-animation-duration: 5s;/*动画所花费的时间*/
/*可以简写为*/
/* animation: scaleDraw 5s ease-in-out infinite; */
/* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
}
</style>
</head>
<body>
<div class="ballon">欢迎来到PHP中文网</div>
</body>
</html>
Penerangan:
animasi (atribut animasi)
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 | 3 |
| animation | 复合属性。检索或设置对象所应用的动画特效。 | 3 |
| animation-name | 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 | 3 |
| animation-duration | 检索或设置对象动画的持续时间 | 3 |
| animation-timing-function | 检索或设置对象动画的过渡类型 | 3 |
| animation-delay | 检索或设置对象动画的延迟时间 | 3 |
| animation-iteration-count | 检索或设置对象动画的循环次数 | 3 |
| animation-direction | 检索或设置对象动画在循环中是否反向运动 | 3 |
| animation-play-state | 检索或设置对象动画的状态 | 3 |
@keyframes ialah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
Peraturan @keyframes terdiri daripada satu set peraturan gaya CSS terkapsul yang menerangkan cara nilai atribut berubah dari semasa ke semasa.
@keyframes animation-name {keyframes-selector {css-styles;}}keyframes-selector: Mentakrifkan peratusan animasi, ia adalah antara 0% dan 100%. Animasi boleh mengandungi banyak pemilih.
Kemudian, menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal pelbagai aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada untuk bergantian antara nilai mula dan tamat, dan animasi Sama ada ia harus berjalan atau berhenti seketika. Animasi juga boleh melambatkan masa mulanya.
Peraturan @keyframe terdiri daripada kata kunci "@keyframe", diikuti dengan pengecam yang memberikan nama animasi (yang akan dirujuk menggunakan animasi-nama), diikuti dengan set peraturan gaya (dibataskan oleh pendakap kerinting). Animasi kemudian digunakan pada elemen dengan menggunakan pengecam sebagai nilai atribut nama-animasi.
Sintaks:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}Dalam pendakap kerinting kita perlu mentakrifkan bingkai utama atau titik laluan yang menentukan sifat yang sedang dianimasikan pada titik tertentu semasa nilai animasi. Ini membolehkan kami mengawal langkah perantaraan dalam urutan animasi.
(Mempelajari perkongsian video: tutorial video css, bahagian hadapan web)
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi pembesaran dan pengurangan fon dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!