![]()
悬浮卡片
我自己也是个新手，用css伪类写的，查阅了很多教程。
有不好的地方大家勿介意，欢迎评论给我指点。
如果源码有值得修改的地方，欢迎指正。
成品效果
![]()
源码演示
![]()
html
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/css/kp.css" /> </head> <body> <!-- 悬浮方块 --> <div class="xf iconfont"> <p class="switch">开</p> <input type="checkbox" /> <div class="icon-qianbao money"></div> <br /> <span>流量主</span> </div> </body></html>
![]()
css
@import url(//at.alicdn.com/t/c/font_3886805_3yrd85ave4m.css);* { padding: 0; margin: 0;}.xf { width: 163px; height: 136px; background: #fff; border-radius: 25px; border: 1px solid #888787; padding-left: 20px;}.xf:hover { transform: scale(1.05, 1.05); background: #7a40f2; transition: 0.4s; -webkit-box-shadow: #666 0px 0px 10px; -moz-box-shadow: #666 0px 0px 10px; box-shadow: #666 0px 0px 10px; color: #fff;}/* 开关 */.xf input { width: 40px; height: 20px; appearance: none; background: #f5f5f5; border-radius: 40px; border: 1px solid rgba(0, 0, 0, 0.15); position: relative; top: -17px; left: 103px;}.xf input::before { content: ""; position: absolute; top: 0; left: 0; height: 16px; width: 16px; background: #fff; border-radius: 50%; transition: all 0.15s ease-in-out; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-box-shadow: #a5a4a4 0px 0px 10px; -moz-box-shadow: #a5a4a4 0px 0px 10px; box-shadow: #a5a4a4 0px 0px 10px;}.xf input:checked { background: #6e5cea;}.xf input:checked + div { color: #6e5cea;}.xf input:checked ~ span { color: #6e5cea;}.xf input:checked::before { left: calc(100% - 16px); transition: all 0.15s ease-in-out;}.xf:hover input::before { background: #6e5cea; border: 1px solid rgba(0, 0, 0, 0.15);}.xf:hover input:checked { background: #fff;}.xf:hover input:checked + div { color: #fff;}.xf:hover input:checked ~ span { color: #fff;}.xf input:hover { background: #fff;}/* 开关文字样式 */.switch { font-size: 12px; padding-top: 24px; line-height: 70%;}/* icon样式 */.icon-qianbao { font-size: 35px; padding-top: 0px;}.xf span { font-size: 14px; padding-bottom: 24px;}