likes
comments
collection

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

作者站长头像
站长
· 阅读数 19

前言

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

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

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

实现

实现过程

设计

首先我们需要通过一个按钮来判断是否激活这个弹窗框,这里决定使用 表单的 选项标签,并且我们在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的过渡以及动画效果。