<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>购物车背景放大缩小动画</title> <style> .global-nav__nav-shop-cart-num{ position: absolute; height: 16px; line-height: 16px; padding: 0 5px; border-radius: 8px; background-color: #7ECC00; color: #fff; font-size: 12px; animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/ animation- duration: 2s;/*动画持续时间*/ animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/ animation-delay: 0s;/*动画延迟时间*/ animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/ animation-direction: alternate;/*定义动画方式*/ -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 2s;/*动画持续时间*/ -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 0s;/*动画延迟时间*/ -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/} @keyframes ripple { 0% { padding:5px 8px; } 100% { padding:0 5px; } } </style> </head> <body> <span class="global-nav__nav-shop-cart-num" id="carId">21</span> </body> </html>
如果不是动作触发的话，就要注意，每次触发一次都要删掉该class，可以延迟1-2秒删除