CSS3模拟IOS滑动开关效果

作者：crper 字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3开关按钮,css3 开关,css3开关灯特效,css3动画效果,css3阴影效果等相关知识,crper 希望在学习及工作中可以帮助到您

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

代码

</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3模拟IOS开关</title>
<style type="text/css" media="screen">
/* ==========================================================================
设置根元素字体大小
========================================================================== */
html {
font-size: 100px;
}
/* ==========================================================================
设置模拟元素的包裹层,装饰...毫无卵用
========================================================================== */
.ios-checkbox{
height:4rem;
width:4rem;
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
border:.05rem dashed #3DB7A9;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-justify-content:space-around;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}

您可能想查找下面的文章:

相关文章

2017-06-02CSS3盒子模型详解
2017-06-02CSS3实现多重边框的方法总结
2017-06-02CSS3 border-image详解、应用及jQuery插件
2017-06-02使用CSS3实现多列布局与多背景的技巧
2017-06-02CSS3 animation实现逐帧动画效果
2017-06-02CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
2017-06-02CSS3 text-shadow实现文字阴影效果
2017-06-02CSS3制作缩略图的详细过程
2017-06-02css3 iphone玻璃透明气泡完美实现
2017-06-02CSS3弹性盒模型开发笔记（三）