中国建设银行官网站纪念币预约网址查询ip解析

当前位置： 首页 > news >正文

中国建设银行官网站纪念币预约,网址查询ip解析,网络服务工程师安全生产责任制最新版,建设集团属于什么单位前言 #x1f44f;CSS实现checkbox选中动画#xff0c;速速来Get吧~ #x1f947;文末分享源代码。记得点赞关注收藏#xff01; 1.实现效果 2.实现步骤 定义css变量#xff0c;–checked#xff0c;表示激活选中色值 :root {–checked: orange; }创建父容器#xf…前言 CSS实现checkbox选中动画速速来Get吧~ 文末分享源代码。记得点赞关注收藏 1.实现效果 2.实现步骤 定义css变量–checked表示激活选中色值 :root {–checked: orange; }创建父容器添加box-shadow阴影 div classcontainer/div.container {min-width: 280px;padding: 30px;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);position: relative;}父容器内添加清单列表使checkbox和label相互绑定 checkbox复选框 label:表示用户界面中某个元素的说明 将一个 label 和一个 input元素匹配在一起你需要给 input 一个 id 属性。而 label需要一个 for 属性其值和 input 的 id 一样。 eg div classpreferencelabel forcheeseDo you like cheese?/labelinput typecheckbox namecheese idcheese /div或者你也可以将 input 直接放在 label 里此时则不需要 for 和 id属性因为关联已隐含存在。 eg labelDo you like peas?input typecheckbox namepeas /label这里我们为label设置for属性为input设置id div classiteminput typecheckbox idoption1 /label foroption1学习/label /div …//剩余清单列表这里不做多余展示 div classiteminput typecheckbox idoption4 /label foroption4吃火锅/label /div.item {margin-bottom: 20px;font-size: 15px;letter-spacing: 5px; } /* 最后一个元素底边距为0 / .item:last-child {margin-bottom: 0;}重写checkbox样式这里提供两种方案 方案一设置checkbox为appearancenone不应用任何特殊样式 appearance定义元素特别是表单控件默认情况下的显示方式。通过将该值设置为none默认外观可以使用其他 CSS 属性完全重新定义。 input[typecheckbox] { / 去除系统默认appearance的样式 */-webkit-appearance: none;/*设置新样式 /width: 25px;height: 25px;position: relative;margin-right: 10px;border: 2px solid #fff;border-radius: 50%; }添加checkbox选中样式设置transform偏移添加过渡效果可以发现父容器的高度随着checkbox的变化上下起伏这并不是我想要的效果 input[typecheckbox]:checked {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out; }给checkbox添加一个伪元素绝对定位用来展示样式,当选中时候去改其伪元素的样式绝对定位不会影响到当前高度。 input[typecheckbox] {- border: 2px solid #fff;- border-radius: 50%; } / input的checkbox样式添加伪元素 / input[typecheckbox]::after {content: ;width: 100%;height: 100%;border: 2px solid #fff;position: absolute;left: 0;top: 0;border-radius: 50%; } / 设置checkbox点击之后的样式 / input[typecheckbox]:checked::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out; }方案二考虑到appearance的兼容性可以使用更加稳妥的方式来实现隐藏checkbox框添加新的标签用来展示样式 为checkbox添加兄弟元素 div classiteminput typecheckbox idoption1 /span/spanlabel foroption1学习/label /divcheckbox的隐藏说到元素隐藏有三种方式在这浅浅的说下 display: none 不占用页面空间其占用的空间会被其他元素所占有从而会引起浏览器的重排和重汇不能点击。 visibility: hidden 会占用页面空间因此只会导致浏览器的重汇而不会引起重排不能点击 opacity: 0 占据页面空间可以点击。 那这里需要的是隐藏且能点击使用opacity绝对定位且z-index要置于最上方 input[typecheckbox] {visibility: hidden;position: absolute;width: 25px;height: 25px;/ 位于最上方 /z-index: 1; } .item span {width: 25px;height: 25px;position: relative;margin-right: 10px;display: inline-block;vertical-align: middle; } .item span::after {content: ;width: 100%;height: 100%;border: 2px solid #fff;position: absolute;left: 0;top: 0;border-radius: 50%; }号选择器相邻兄弟选择器用于选取在同一父元素下的紧跟指定元素之后的另一个元素 input[typecheckbox]:checked span::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out; }设置label样式text-decoration-line设置为横线默认为透明颜色偏移距离为1px,添加过渡效果 text-decoration-line用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时用 text-decoration 简写属性会比分别写多个属性更方便。 text-decoration-color 用于设置文本修饰线的颜色文本修饰线是通过 text-decoration-line 属性指定的。 text-underline-offset设置文本装饰下划线使用 text-decoration 应用与其原始位置的偏移距离。 label {cursor: pointer;text-decoration-line: underline;/ 设置底部线条颜色为透明色 /text-decoration-color: transparent;text-underline-offset: 1px;/ 添加过渡效果 /transition: all 0.5s; }设置lable处于hover状态的样式当hover时候设置文本修饰线颜色为–checked文本颜色为–checked偏移距离设置为10px / label添加hover事件 / label:hover {text-decoration-color: var(–checked);text-underline-offset: 10px;color: var(–checked);}设置label处于被选中状态的样式设置文本修饰线颜色为–checked文本颜色为–checked偏移距离设置为-5px居于文本中间就完成了啦 “~”　运算符p~ul选择器表示 p之后出现的所有ul。两种元素必须拥有相同的父元素但是 ul不必直接紧随 p。 / 设置checkbox被选中之后label的样式 / input[typecheckbox]:checked ~ label {color: var(–checked);text-underline-offset: -5px;text-decoration-color: var(–checked); }3.实现代码 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleCSS实现checkbox选中动画/title/headlink relstylesheet href../common.css /style:root {–checked: orange;}.container {min-width: 280px;padding: 30px;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);position: relative;}.item {margin-bottom: 20px;font-size: 15px;letter-spacing: 5px;}/ 最后一个元素底边距为0 /.item:last-child {margin-bottom: 0;}/ 重写input的checkbox样式 /input[typecheckbox] {/ 去除系统默认appearance的样式 */-webkit-appearance: none;appearance: none;/*设置新样式 /width: 25px;height: 25px;position: relative;margin-right: 10px;}/ input的checkbox样式添加伪元素 /input[typecheckbox]::after {content: ;width: 100%;height: 100%;border: 2px solid #fff;position: absolute;left: 0;top: 0;border-radius: 50%;}/ 设置checkbox点击之后的样式 /input[typecheckbox]:checked::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out;}/ 设置label的样式 /label {cursor: pointer;text-decoration-line: underline;/ 设置底部线条颜色为透明色 /text-decoration-color: transparent;text-underline-offset: 1px;/ 添加过渡效果 /transition: all 0.5s;}/ label添加hover事件 /label:hover {text-decoration-color: var(–checked);text-underline-offset: 10px;color: var(–checked);}/ 设置checkbox被选中之后label的样式 */input[typecheckbox]:checked ~ label {color: var(–checked);text-underline-offset: -5px;text-decoration-color: var(–checked);}/stylebodydiv classcontainerdiv classiteminput typecheckbox idoption1 /label foroption1学习/label/divdiv classiteminput typecheckbox idoption2 /label foroption2更新视频/label/divdiv classiteminput typecheckbox idoption3 /label foroption3看狂飙/label/divdiv classiteminput typecheckbox idoption4 /label foroption4吃火锅/label/div/div/body /html4.写在最后 好啦今天的小白文就到此结束了( 大家鼓掌 ) 看完本文如果觉得对你有一丢丢帮助记得点赞关注收藏鸭
更多相关内容关注苏苏的bug苏苏的github苏苏的码云