苹果开关按钮效果~~

关闭时开启时

超文本标记语言

复制代码代码如下：DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title apple button/title/head dy div id=' div 1 ' class=' open 1 ' div id=' div 2 ' class=' open 2 '/div/div/body/html

钢性铸铁

复制代码代码如下： # div1 {宽度： 170px高度： 100像素；边界半径： 50px相对位置：} # div2 { width: 96px高度： 96px边界半径： 48px绝对位置：背景：白色；box-shadow: 0px 2px 4px rgba(0，0，0，0.4)；} .open1{ background: rgba(0，184，0，0.8)；} . open 2 { top : 2px right : 1px }。关闭1 {后台： rgba(255，255，255，0.4)；border:3px固体rgba(0，0，0，0.15)；边框-左转：透明；} . close 2 { left : 0pxtop : 0pxborder :2 px固体rgba(0，0，0，0.1)；}

爪哇岛描述语言

复制代码代码如下：窗口。onload=function(){ var div 2=document。getelementbyid(' div 2 ')；var div 1=文档。getelementbyid(' div 1 ')；第二分区。onclick=function(){ div 1。类名=(div 1。类名=“close 1”)？open1 ' : ' close1div 2。类名=(div 2。类名=' close 2 ')？open2 ' : ' close2} }

以上所述就是本文的全部内容了，希望能够对大家熟练掌握网前段设计有所帮助。