多种图标动画按钮【原创】

查看演示 下载资源 下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要设置好页面各元素的样式，代码较多，这里仅贴出部分代码：

.btn.topArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0.2em); }
.btn.topArrow > span > span.s2 { transform-origin: 0 0; height: 1.4em; transform: translate(1em,0) rotate(45deg); }
.btn.topArrow > span > span.s3 { transform-origin: 100% 0; height: 1.4em; transform: translate(0.6em,0) rotate(-45deg); }
.btn.bottomArrow > span > span { width: 0.4em; height: 1.8em; transform: translate(0.8em,0); }
.btn.bottomArrow > span > span.s2 { transform-origin: 100% 100%; height: 1.4em; transform: translate(0.6em,0.6em) rotate(45deg); }
.btn.bottomArrow > span > span.s3 { transform-origin: 0 100%; height: 1.4em; transform: translate(1em,0.6em) rotate(-45deg); }
.btn.rightArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0,0.8em); }
.btn.rightArrow > span > span.s2 { transform-origin: 100% 0; width: 1.4em; transform: translate(0.6em,1em) rotate(45deg); }
.btn.rightArrow > span > span.s3 { transform-origin: 100% 100%; width: 1.4em; transform: translate(0.6em,0.6em) rotate(-45deg); }
.btn.leftArrow > span > span { width: 1.8em; height: 0.4em; transform: translate(0.2em,0.8em); }
.btn.leftArrow > span > span.s2 { transform-origin: 0 100%; width: 1.4em; transform: translate(0,0.6em) rotate(45deg); }
.btn.leftArrow > span > span.s3 { transform-origin: 0 0; width: 1.4em; transform: translate(0,1em) rotate(-45deg); }
.btn.checked > span > span { width: 1em; height: 0.4em; transform-origin: 100% 100%; transform: translate(-0.3em,1.4em) rotate(45deg); }
.btn.checked > span > span.s3 { width: 1.8em; transform-origin: 0 100%; transform: translate(0.7em,1.4em) rotate(-45deg); }
.btn.heart > span > span { width: 1em; height: 1.7em; top: 0.2em; left: 1em; transform-origin: 0 100%; transform: rotate(-45deg); border-radius: 1em 1em 0 0; }
.btn.heart > span > span.s3 { transform-origin: 100% 100%; left: 0em; transform: rotate(45deg); }
header.grey .btn span span { background-color: #9e9e9e; }
header.indigo .btn span span { background-color: #3f51b5; }
header.cyan .btn span span { background-color: #00bcd4; }
header.lightGreen .btn span span { background-color: #8bc34a; }
header.amber .btn span span { background-color: #ffc107; }
.drop { display: block; position: absolute; background: #CCC; border-radius: 100%; transform: scale(0); pointer-events: none; width: 100%; height: 100%; }
.drop:before { display: block; position: absolute; content: ""; background-color: #EEE; border-radius: 100%; width: 100%; height: 100%; top: 0; left: 0; transform: scale(0); }
.drop.animate { animation: drop 1s ease-out; }
.drop.animate:before { animation: drop2 1s ease-out; }
@keyframes drop {
  100% { opacity: 0; transform: scale(2.5); }
}
@keyframes drop2 {
  30% { opacity: 1; transform: scale(0); }
  100% { opacity: 0; transform: scale(2.5); }
}

接着远程调用一个JS文件，用于改善CSS属性的浏览器兼容性，代码如下：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

页面的body部分，根据页面的布局设置好各元素的容器即可，代码如下：

<header>
  <h1>多种图标动画按钮</h1>
  <a href="#" class="btn play">
    <span>
      <span class="s1"></span>
      <span class="s2"></span>
      <span class="s3"></span>
    </span>
  </a>
</header>
<article>
  <p class="arrows">
    <a href="#" id="prev" class="btn leftArrow"><span><span class="s1"></span><span class="s2"></span><span class="s3"></span></span></a>
    <a href="#" id="next" class="btn rightArrow"><span><span class="s1"></span><span class="s2"></span><span class="s3"></span></span></a>
  </p>
  <form class="row">
    <div class="col50">
      <fieldset>
        <h3>类型</h3>
        <label><input type="radio" name="button" value="play" checked>播放</label>
        <label><input type="radio" name="button" value="pause">暂停</label>
        <label><input type="radio" name="button" value="stop">停止</label>
        <label><input type="radio" name="button" value="menu">菜单</label>
        <label><input type="radio" name="button" value="close">关闭</label>
        <label><input type="radio" name="button" value="plus">加号</label>
        <label><input type="radio" name="button" value="minus">减号</label>
        <label><input type="radio" name="button" value="more">更多</label>
        <label><input type="radio" name="button" value="topArrow">上箭头</label>
        <label><input type="radio" name="button" value="rightArrow">右箭头</label>
        <label><input type="radio" name="button" value="bottomArrow">下箭头</label>
        <label><input type="radio" name="button" value="leftArrow">左箭头</label>
        <label><input type="radio" name="button" value="checked">选中</label>
        <label><input type="radio" name="button" value="heart">爱心</label>
      </fieldset>
    </div>
    <div class="col50">
      <fieldset>
        <h3>大小</h3>
        <label><input type="radio" name="size" value="small">小鸟依人</label>
        <label><input type="radio" name="size" value="medium" checked>青秀迷人</label>
        <label><input type="radio" name="size" value="large">丰满诱人</label>
        <label><input type="radio" name="size" value="xl">瘦身成人</label>
      </fieldset>
      <fieldset>
        <h3>颜色</h3>
        <label><input type="radio" name="color" value="pink" checked>桃花粉</label>
        <label><input type="radio" name="color" value="indigo">梦幻蓝</label>
        <label><input type="radio" name="color" value="cyan">碧空蓝</label>
        <label><input type="radio" name="color" value="lightGreen">清新绿</label>
        <label><input type="radio" name="color" value="amber">柠檬黄</label>
        <label><input type="radio" name="color" value="grey">太空灰</label>
      </fieldset>
    </div>
  </form>
</article>

页面的底部，远程调用jQuery库，并引入一个JS插件，控制按钮的事件响应等，代码如下：

<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>