如何用CSS3创建一个开关

html-css09

如何用CSS3创建一个开关,第1张

我使用SVG、Canvas、CSS3或者背景图片实现五角星图案及其悬停效

CSS3引入伪元素变换特性使实现五角星图形非简单并且结合渐变实现更漂亮效

使用图片实现五角星已经毫必要（图片占用额外请求且数据量除非要支持低版本桌面IE浏览器）

首先我创建三角形通使用带尺寸边线零内容尺寸元素实现代码示范：

.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}

第二步我使用伪元素:after:before克隆2同三角形

.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}

我述2伪元素别应用同旋转变换：

.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}

我实现五角星图形（图标）我用类似实现更几何形状

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

    <script src="http://js.ue.766.com/common/jqLib/jquery-1.6.2.min.js" type="text/javascript"></script>

    <title>开关</title>

    <style>

        .box{background: #629FCEwidth: 200pxheight: 30pxborder-radius: 15pxposition: relativeleft: 50pxtop: 50px}

        .slider{background: #F6F6F6width: 100pxheight: 30pxborder-radius: 15pxposition: absolutetransition: left 0.5s -moz-transition: left 0.5s -webkit-transition: left 0.5sleft:0}

        span{height: 30pxline-height: 30pxcolor: #F6F6F6font-weight: 800}

        .m{float: leftmargin-left: 50px}

        .w{float: rightmargin-right: 50px}

    </style>

</head>

<body>

    <div class="box">

        <div class="slider" id="slider"></div>

        <span class="m">男</span>

        <span class="w">女</span>

    </div>

</body>

<script>

    $("#slider").toggle(

            function () {

                $(this).css("left","100px")

            },

            function () {

                $(this).css("left","0")

            }

        )

</script>

</html>

手打了一个给你，嘿嘿