淘寶css動(dòng)畫效果，是隨著web前端技術(shù)的日趨發(fā)展而逐漸普及的。CSS動(dòng)畫是一種可以將動(dòng)態(tài)和互動(dòng)性添加到設(shè)計(jì)中的方法。淘寶通過(guò)透過(guò)css樣式的掌控實(shí)現(xiàn)了頭像的晃動(dòng)，添加購(gòu)物車時(shí)的動(dòng)態(tài)切換，以及購(gòu)物車條目的刪減動(dòng)畫等等。

/* 頭像晃動(dòng)動(dòng)畫 */
.animated{
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated:hover,{
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes swing{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
30% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
50% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
70% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
90% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* 購(gòu)物車添加時(shí)的動(dòng)態(tài)切換 */
#animate{
display: block;
position: absolute;
background-color: #00A0E8;
border-radius: 50%;
-webkit-animation: change 0.8s infinite;
animation: change 0.8s infinite;
}
#animate:after{
content: "";
display: block;
padding-top: 100%;
}
#addCartBtn{
position: relative;
}
@keyframes change{
0%{
transform: scale(1);
opacity: 1;
}
50%{
transform: scale(1.5);
opacity: 0;
}
100%{
transform: scale(1);
opacity: 1;
}
}
/* 購(gòu)物車條目刪減動(dòng)畫 */
.item{
position: relative;
}
.item:hover .delete{
animation: scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.delete{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 0.3s;
}
.delete:hover{
transform: translateY(-50%) scale(1.2);
}
@keyframes scale{
0%{
transform: scale(1);
opacity: 1;
}
50%{
transform: scale(0.7);
opacity: 0.7;
}
100%{
transform: scale(0.2);
opacity: 0;
}
}

通過(guò)上述的動(dòng)畫效果，淘寶網(wǎng)站為用戶帶來(lái)更加生動(dòng)豐富的購(gòu)物體驗(yàn)，也為整體網(wǎng)站提升了用戶體驗(yàn)。希望我們?nèi)蘸笤谇岸碎_(kāi)發(fā)中也能夠有所積累，精益求精，打造出更加優(yōu)秀的界面。