html页面确认按钮浮动,html的浮动按钮

最终达到的效果图：

代码实现：

Document

.checkbox {

position: relative;

display: inline-block;

}

.checkbox:after, .checkbox:before {

font-family: FontAwesome;

-webkit-font-feature-settings: normal;

-moz-font-feature-settings: normal;

font-feature-settings: normal;

-webkit-font-kerning: auto;

-moz-font-kerning: auto;

font-kerning: auto;

-webkit-font-language-override: normal;

-moz-font-language-override: normal;

font-language-override: normal;

font-stretch: normal;

font-style: normal;

font-synthesis: weight style;

font-variant: normal;

font-weight: normal;

text-rendering: auto;

}

.checkbox label {

width: 90px;

height: 42px;

background: #ccc;

position: relative;

display: inline-block;

border-radius: 46px;

-webkit-transition: 0.4s;

transition: 0.4s;

}

.checkbox label:after {

content: '';

position: absolute;

width: 50px;

height: 50px;

border-radius: 100%;

left: 0;

top: -5px;

z-index: 2;

background: #fff;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

-webkit-transition: 0.4s;

transition: 0.4s;

}

.checkbox input {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 5;

opacity: 0;

cursor: pointer;

}

.checkbox input:hover + label:after {

box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);

}

.checkbox input:checked + label:after {

left: 40px;

}

.model-1 .checkbox input:checked + label {

background: #376ecb;

}

.model-1 .checkbox input:checked + label:after {

background: #4285F4;

}

html页面确认按钮浮动,html的浮动按钮相关推荐

Qt中按钮图标的设置、按钮按下时浮动效果设置以及 QT的EXE程序图标设置
本文内容皆为Qt 5.13版本. 使用 IDE为 QTCreator.若是 VS+QT插件环境则可能有略微差异. 推荐一个不错的图标网站,大部分资源都可以免费下载: https://www.easyi ...
初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
【CSS学习（三）盒子模型、边距重叠浮动、清除浮动】
盒子模型盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
CSS浮动和清除浮动
1 浮动简介 CSS浮动是指浮动元素会脱离"文档流"并向左或向右浮动,允许文本和内联元素环绕它,直到碰到父元素或者另一个浮动元素. 需要注意的是,在CSS定位中absolute绝对 ...
css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
CSS之浮动/BFC/清除浮动（十二）
CSS 浮动/BFC/清除浮动 1,实现 CSS 布局的几种策略 2,正常布局流(Normal Flow) 2.1,正常布局流中,块级元素的排列方式 2.2,正常布局流中, 内联元素排版方式 3,浮动 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮漏特案例:体会浮动现在就可以用float实现一些基本页面布局了链接清除浮 ...
html css 中浮动影响与浮动问题的解决
html css 中浮动影响与浮动问题的解决浮动浮动就是使元素脱离文档流且块级元素在同一行显示(文档流:元素在页面中所占的位置) 浮动特性:脱离文档流,原先位置不保留,飘在文档流的上方. 给元素设 ...

html页面确认按钮浮动,html的浮动按钮

html页面确认按钮浮动,html的浮动按钮相关推荐

最新文章

热门文章