纯css+html实现app动态弹出框

前言

本文将要介绍如何用纯css加上html实现一个app动态弹出框，这个弹出框应该在大部分手机当中都是很常用的，相信大家在平时使用手机的过程当中也没少见到，今天我们就来简单的实现一个。

本实例的灵感来源于本人的小米手机，手机本身有一个悬浮球功能，能够唤起部分功能，本实例主要就是通过css和html来模拟这个效果

实现

实现过程

设计

首先我们需要通过一个按钮来判断是否激活这个弹窗框，这里决定使用 表单的 选项标签，并且我们在css中也能够获取到这个选项标签是否被选中，一次来展示不同的样式。

因此我们就能够设计出我们需要的页面结构，一个选择框，以及一对选择之后需要展示的按钮

<div class="box">
  <input type="checkbox" class="box-button" id="box-buttons" />
  <label class="circular" for="box-buttons"></label>
  <label class="fork" for="box-buttons"></label>
  <ul>
    <li class="box-item">
      <a href="#"><i class="fa fa-square-o"></i></a>
    </li>
    <li class="box-item">
      <a href="#"><i class="fa fa-bars"></i></a>
    </li>
    <li class="box-item">
      <a href="#"><i class="fa fa-lock"></i></a>
    </li>
    <li class="box-item">
      <a href="#"><i class="fa fa-crop"></i></a>
    </li>
    <li class="box-item">
      <a href="#"><i class="fa fa-commenting-o"></i></a>
    </li>
  </ul>
</div>

按钮动效

然后中间的按钮的特效其实是由两个label组件形成，一个分别代表一个状态，选中之后就会展示另一个label元素，然后两个元素之间的切换就是一个消失然后另一个出现，只要在消失和出现上设定好过渡效果，就能够得到丝滑的转场。

item

然后其他的小按钮在一开始都是隐藏状态，这里使用透明度为零来进行隐藏，这样在出现的时候才会有那种过渡从没有到有的效果，并且没有选择的时候，小按钮都是定位在和切换按钮同样的位置，在点击之后，分别从各自不同的角度平移出去，其中角度的偏移和平移，使用的就是css的transform属性，然后配合过渡就能够得到按钮出现的效果。

到这里，这个小实例也就差不多完成了。

总结

本文主要是通过过渡和动画效果实现了一个简单的app动态弹出框，以此深入理解一下css的过渡以及动画效果。