仿电商红包摆动效果

废话不多说，直接上代码~~~html:<img class="small" src="https://resource.tuixb.cn/test/mp_51dcd190-834c-11e9-8444-018b79c0e985/default/f82aaf97-0fbc-4a7e-afc9-ad9a11277924.png" />css:.small{po...

白开水丶

670人浏览 · 2020-03-24 15:33:51

白开水丶 · 2020-03-24 15:33:51 发布

废话不多说，直接上代码~~~

<!DOCTYPE html>
<html lang="en">

<head>
  <title>仿拼多多红包摆动</title>
  <style>
    .small{
    position: fixed;
    bottom: 80px;
    right: 10px;
    height: 118px;
    width: 120px;
    background: none;
    animation:swing .5s  linear infinite;
    transform:rotate(0deg);
}
@keyframes swing{
  0%   {transform:rotate(0deg);}
    10%  {transform:rotate(-10deg);}
    20%  {transform:rotate(0deg);}
  30%  {transform:rotate(10deg);}
  40%   {transform:rotate(0deg);}
    50%  {transform:rotate(-10deg);}
    60%  {transform:rotate(0deg);}
  70%  {transform:rotate(10deg);}
    80%  {transform:rotate(0deg);}
    90%  {transform:rotate(0deg);}
    100%  {transform:rotate(0deg);}
}
  </style>
</head>

<body>
	<img class="small" src="https://resource.tuixb.cn/test/mp_51dcd190-834c-11e9-8444-018b79c0e985/default/f82aaf97-0fbc-4a7e-afc9-ad9a11277924.png" />
</body>
</html>