jquery+css美化checkbox胶囊开关效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css美化checkbox胶囊开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Ubuntu); body { text-align: center; padding: 10% 50px; background-color: #2c3e50; } h1 { font-family: "Ubuntu", sans-serif; color: #fff; font-size: 40px; font-weight: normal; margin-bottom: 50px; } .toggle-btn { width: 80px; height: 40px; margin: 10px; border-radius: 50px; display: inline-block; position: relative; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==") no-repeat 50px center #e74c3c; cursor: pointer; -webkit-transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out; cursor: pointer; } .toggle-btn.active { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC") no-repeat 10px center #2ecc71; } .toggle-btn.active .round-btn { left: 45px; } .toggle-btn .round-btn { width: 30px; height: 30px; background-color: #fff; border-radius: 50%; display: inline-block; position: absolute; left: 5px; top: 50%; margin-top: -15px; -webkit-transition: all 0.3s ease-in-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0