css实现开关效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现开关效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * Switch Styles by Alexandre Joffroy * - https://codepen.io/alexjoffroy/pen/ORXOmR */ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); .switch { display: block; margin-top: 24px; } .switch .slider { position: relative; display: inline-block; height: 8px; width: 32px; border-radius: 8px; cursor: pointer; background: #c5c5c5; transition: all 0.2s ease; } .switch .slider:after { background: #eeeeee; position: absolute; left: -8px; top: -8px; display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); content: ""; transition: all 0.2s ease; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0