宝哥软件园

javascript结合半铸钢ˌ钢性铸铁(铸造半钢)实现苹果开关按钮特效

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

苹果开关按钮效果~~

关闭时开启时

超文本标记语言

复制代码代码如下: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} }

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

更多资讯
游戏推荐
更多+