CSS小動畫讓網頁更加生動有趣。下面為大家分享一些CSS小動畫代碼。

CSS Transitions

.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s;
}
.box:hover {
width: 200px;
}

CSS Animations

.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {left: 0;}
50% {left: 200px;}
100% {left: 0;}
}

CSS Transforms

.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}

CSS Keyframe Animations

.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
position: relative;
}
.box::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%; background: white;
position: absolute;
top: 45px;
left: 15px;
animation: blink 1s infinite;
animation-delay: 2s;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

以上就是一些CSS小動畫代碼的示例。使用這些代碼可以為網站帶來更多生動有趣的互動效果。