卡卡网

网站上很常见的一个左右摆动的div长方形小图标，本文介绍下实现方法。

效果图

demo

它的html代码如下：

<div class='div1'>
    <span class="span1">低至2折</span>
</div>

css实现代码：

.div1{
  margin-left:100px;
  margin-top:100px; 
  width:90px;
  height:30px;
  border-radius: 6px;
  color: #11084d;
  background:#ff968f;
  animation: swing 3s infinite alternate;
}

@keyframes swing {
  20% { transform: rotate(10deg); }
  40% { transform: rotate(-5deg); }
  60% { transform: rotate(0deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(-15deg); }
}

.span1 {
    font-size:16px;
    padding: inherit; 
    position: absolute;
    margin-left: 1.0rem; 
    margin-top: 0.25rem;
}

得到的效果这样：

demodownload

代码解释：

代码主要使用了 animation 这个css属性。animation 使用了 swing 的运动方式，swing 是自定义的一个运动方式命名。

swing 自定义代码里面 transform: rotate(10deg); 意思是转动10度。

本示例中，分别在20%、40%、60%、80%、100%赋予一个运动角度，以达到左右摆动的效果。

相关文章

• 很漂亮的div循环缩小放大效果[CSS源码]
• 一款纯CSS实现的精致好看的圆角渐变边框
• 纯CSS如何为div添加圆角渐变边框
• 如何使用纯CSS为div添加边框图像和渐变边框
• 5款CSS设置漂亮好看的div边框图样式
• CSS如何让DIV背景图片随窗口大小自动缩放
• [2示例]如何使用CSS将div中的图像居中对齐
• [2示例]使用 CSS 使 div 可水平滚动
• 6种方法改变div的id值（使用JQuery或JS）
• 用JQuery或JS改变div的id的五种方法
• div层显示/隐藏的6种常见效果

标签: div