Html 在开关按钮中添加动画_Html_Css_Css Transitions

Html 在开关按钮中添加动画

html css

Html 在开关按钮中添加动画,html,css,css-transitions,Html,Css,Css Transitions,我试图通过使用HTML元素来创建一个切换按钮。但我不能为此制作动画。在这里，我尝试使用TransitionCSS3属性。转换将仅对某些元素有效，而其对switch group:before元素的工作方式与预期不同。有没有办法改进更多的动画以获得一个有吸引力的动画？。我尝试了许多链接，但这对我的代码没有帮助。我在下面附上了代码输入[类型=复选框]{ 显示：无； } .交换机包装器{ 位置：相对位置；宽度：70px；边框：1px实心；光标：指针；高度：22px；溢出：隐藏； } .打开

我试图通过使用HTML元素来创建一个切换按钮。但我不能为此制作动画。在这里，我尝试使用TransitionCSS3属性。转换将仅对某些元素有效，而其对switch group:before元素的工作方式与预期不同。有没有办法改进更多的动画以获得一个有吸引力的动画？。我尝试了许多链接，但这对我的代码没有帮助。我在下面附上了代码

输入[类型=复选框]{ 显示：无； } .交换机包装器{ 位置：相对位置；宽度：70px；边框：1px实心；光标：指针；高度：22px；溢出：隐藏； } .打开， .关掉{ 显示：块；宽度：50%；浮动：左；身高：100%；过渡：0.5s； } .打开{ 背景色：红色；左边距：-100%；文本缩进：-18px；线高：21px；文本对齐：居中； } .关掉{ 文本缩进：18px；线高：21px；文本对齐：居中；背景色：aliceblue； } .开关组：前{ 显示：块；内容：；位置：绝对位置；高度：18px；宽度：18px；保证金：2倍；背景色：1b191e；顶部：0px； } .开关组{ 显示：块；位置：相对位置；高度：23px；宽度：200%；用户选择：无； } 输入[类型=复选框]：选中+。开关组。打开{ 左边距：0； } 输入[类型=复选框]：选中+。开关组：之前{ 右：50%； } 在…上关试试这个开关

.ONOFF开关{ 位置：相对；宽度：48px； -webkit用户选择：无；-moz用户选择：无；-ms用户选择：无； } .onoffswitch复选框{ 显示：无； } .ONOFF开关标签{ 显示：块；溢出：隐藏；光标：指针；高度：24px；填充：0；线条高度：24px；边框：2px实心F1F5；边框半径：24px；背景色：F1F5；过渡：背景色0.3s，易于调整； } .ONOFF开关标签：之前{ 内容：；显示：块；宽度：24px；边距：0px；背景：FFFFFF；位置：绝对；顶部：0；底部：0；右：22px；边框：2px实心F1F5；边框半径：24px；过渡：所有0.3秒在0秒内轻松过渡； } .onoffswitch复选框：选中+.onoffswitch标签{ 背景色：2DC76D； } .onoffswitch复选框：选中+.onoffswitch标签，.onoffswitch复选框：选中+.onoffswitch标签：之前{ 边框颜色：2DC76D； } .onoffswitch复选框：选中+.onoffswitch标签：之前{ 右：0px； } .onoffswitch复选框：选中+.onoffswitch标签span.switch-off{ 不透明度：0； } .onoffswitch复选框：选中+.onoffswitch标签span.switch-on{ 不透明度：1； } span.开关{ 不透明度：1；浮动：对；字体大小：12px；位置：绝对位置；右：0；最高：50%；转化：translateY-50%； } span.接通{ 位置：绝对位置；字体大小：12px；最高：50%；转化：translateY-50%；不透明度：0； } 在…上关试试这个开关

转换将不适用于：before伪元素，因为您正在将：before right值从autoby default更改为0…转换不适用于自动值

因此，尝试在开始时使用left:0，然后在使用calc选中输入时单击更改其值，并在开始前使用transion:0.5s使其具有动画效果

输入[类型=复选框]{ 显示：无； } .交换机包装器{ 位置：相对位置；宽度：70px；边框：1px实心； C 乌索：指针；高度：22px；溢出：隐藏； } .打开， .关掉{ 显示：块；宽度：50%；浮动：左；身高：100%；过渡：0.5s； } .打开{ 背景色：红色；左边缘：-50%；文本缩进：-18px；线高：21px；文本对齐：居中； } .关掉{ 文本缩进：18px；线高：21px；文本对齐：居中；背景色：aliceblue； } .开关组：前{ 显示：块；内容：；位置：绝对位置；高度：18px；宽度：18px；保证金：2倍；背景色：1b191e；顶部：0px；左：0；过渡：0.5s； } .开关组{ 显示：块；位置：相对位置；高度：23px；宽度：200%；用户选择：无； } 输入[类型=复选框]：选中+。开关组。打开{ 左边距：0； } 输入[类型=复选框]：选中+。开关组：之前{ 左：calc50%-22px； } 在…上关

转换将不适用于：before伪元素，因为您正在将：before right值从autoby default更改为0…转换不适用于自动值

因此，尝试在开始时使用left:0，然后在使用calc选中输入时单击更改其值，并在开始前使用transion:0.5s使其具有动画效果

输入[类型=复选框]{ 显示：无； } .交换机包装器{ 位置：相对位置；宽度：70px；边框：1px实心；光标：指针；高度：22px；溢出：隐藏； } .打开， .关掉{ 显示：块；宽度：50%；浮动：左；身高：100%；过渡：0.5s； } .打开{ 背景色：红色；左边缘：-50%；文本缩进：-18px；线高：21px；文本对齐：居中； } .关掉{ 文本缩进：18px；线高：21px；文本对齐：居中；背景色：aliceblue； } .开关组：前{ 显示：块；内容：；位置：绝对位置；高度：18px；宽度：18px；保证金：2倍；背景色：1b191e；顶部：0px；左：0；过渡：0.5s； } .开关组{ 显示：块；位置：相对位置；高度：23px；宽度：200%；用户选择：无； } 输入[类型=复选框]：选中+。开关组。打开{ 左边距：0； } 输入[类型=复选框]：选中+。开关组：之前{ 左：calc50%-22px； } 在…上关你可以试试这个。。或

.ONOFF开关{ 位置：相对；宽度：90px； -webkit用户选择：无；-moz用户选择：无；-ms用户选择：无； } .onoffswitch复选框{ 显示：无； } .ONOFF开关标签{ 显示：块；溢出：隐藏；光标：指针；边框：2px实心99999；边框半径：20px； } .ONOFF开关内部{ 显示：块；宽度：200%；左边距：-100%；过渡：0秒时，边距为0.3秒； } .onoffswitch内部：之前，.onoffswitch内部：之后{ 显示：块；浮动：左；宽度：50%；高度：30px；填充：0；线宽：30px；字体大小：14px；颜色：白色；字体系列：投石机，Arial，无衬线；字体大小：粗体；框大小：边框框； } .ONOFF开关内部：之前{ 内容：关于；左侧填充：10px；背景色：34A7C1；颜色：FFFFFF； } .ONOFF开关内部：之后{ 内容：关；右边填充：10px；背景色：EEEEE；颜色：999999；文本对齐：右对齐； } .ONOFF开关{ 显示：块；宽度：18px；边距：6px；背景：FFFFFF；位置：绝对；顶部：0；底部：0；右：56px；边框：2px实心99999；边框半径：20px；过渡：所有0.3秒在0秒内轻松过渡； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{ 左边距：0； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{ 右：0px； } 你可以试试这个。。或

尽管这个按钮很好，但它对学习不是很有帮助，因为你没有真正解决问题所在。我喜欢这个，但我需要我演示的元素结构。尽管这个按钮很好，但它对学习不是很有帮助，因为你没有真正解决问题所在。我喜欢这个，但是我需要我已经演示过的元素结构。