CSS動畫放大伸縮效果是一種通過CSS動畫實現文本或圖像的放大和縮小效果的常用技術。本文將介紹如何使用CSS動畫來實現這種效果。
CSS動畫是一種基于CSS屬性的動畫效果，可以通過添加動畫規則來創建動畫效果。在實現CSS動畫放大伸縮效果時，需要使用CSS的動畫屬性和過渡效果。
在CSS中，我們可以使用`動畫`屬性來指定動畫的規則。例如，我們可以使用`@keyframes`規則來定義動畫的樣式。`@keyframes`規則定義了一個動畫的所有可能狀態，例如`0%`到`100%`的放大狀態，或者`0%`到`50%`的縮小狀態。我們可以使用`%`來指定狀態的放大或縮小比例。
下面是一個使用`@keyframes`規則定義的放大效果示例：
```css
.button {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
.button:hover {
animation: zoom 1s linear infinite;
@keyframes zoom {
0% {
transform: scale(0);
100% {
transform: scale(1);
在上面的示例中，我們定義了一個名為`zoom`的動畫規則，它從`0`放大到`1`，并且在放大過程中保持樣式不變。當我們鼠標懸停在文本框上時，我們觸發了這個動畫規則，從而將文本框放大。
除了`@keyframes`規則之外，我們還可以使用CSS的過渡效果來實現動畫效果。過渡效果可以讓文本或圖像的放大和縮小過程中平滑過渡。
下面是一個使用CSS過渡效果實現放大和縮小效果的示例：
```css
.button {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
.button:hover {
animation: zoom-in 1s ease-in-out infinite;
.button {
animation: zoom-out 1s ease-in-out infinite;
@keyframes zoom-in {
0% {
transform: scale(1);
50% {
transform: scale(0.6);
100% {
transform: scale(1);
@keyframes zoom-out {
0% {
transform: scale(1);
60% {
transform: scale(0.6);
100% {
transform: scale(1);
在上面的示例中，我們定義了兩個名為`zoom-in`和`zoom-out`的過渡規則，它們分別實現了文本框的放大和縮小效果。當鼠標懸停在文本框上時，我們觸發了這兩個動畫規則，從而將文本框放大或縮小。
通過使用CSS動畫屬性和過渡效果，我們可以輕松地實現文本或圖像的放大和縮小效果。