Code前端首页关于Code前端联系我们
首页 后端开发数据结构与算法正文

纯 CSS3 用动画覆盖默认复选框、输入和单选样式

terry 2年前 (2023-09-27) 阅读数 81 #数据结构与算法

我正在为一家公司的后端做一个优化项目。当我收到设计方案时，设计师觉得默认的输入、复选框和单选太丑了，需要优化。经过几个演示后，我弄清楚了如何优化这些样式。我的优化原则如下：

  • 由于我是在现有项目上进行优化，所以尽量在不改变原有结构的情况下进行调整。
  • Input和checkbox大多是表单中的元素，所以大多与后台交互，保留原有的属性，只添加新的类或ID
  • 只使用css3，其属性为input，当然也可以直接用img或者用div+span来模拟，但这不叫“优化”，而是模仿。
  • 使用sass，只需更改参数即可重复使用

Idea

总体原则是使用原生HTML元素标签checkbox⓾⓾，添加标签在末尾label隐藏一些原始元素，然后使用css设置所需的样式。基于原生属性评估行为，不使用js。所有

div.container
    input type="checkbox" id="checkbox" 
    label for="checkbox"
    div.bottom-line

HTML 使用本机 CSS 属性来指定用户操作。首先隐藏原来的checkbox，然后设置标签样式，最后设置input[type=checkbox]:checked+标签样式

checkbox

先看demo1

checkbox。实现这个动画其实非常简单。这只能通过CSS来实现。实现原理是将收银机与标签绑定，通过标签来检查是否被检查。更改单击标记上的复选框属性
首先隐藏复选框，然后将其标记为仅边框框架，并在前后使用伪元素来实现复选框的两部分。
首先将前后宽度设置为宽度0.4，高度设置为0。设置不同的旋转角度，使前后之和与刻度线完全匹配。
然后使用css动画设置使高度到达宽度0.7和宽度*0.35并控制动画连续播放，

html

<div class="cb-container">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="cb-label"></label>
</div>

scss


$checked-color: #fff;
$checked-bg:rgb(101,141,181);
$unchecked-color: #cfcece;
$unchecked-bg:rgb(249,249,249);
$checkbox-height: 100px;
$background-color:#fff;
$font-color:#dcdcdc;
$duration: .4s;
.cb-container{
  width: 1000px;
  text-align: center;
  margin-top: 50px;
}

html, body{
  padding:0;
  margin:0;
  background-color: $background-color;
  color:$font-color;
  font-family:'Open Sans';
}
#checkbox{
  display:none;
}

.cb-label{
  height: $checkbox-height;
  width: $checkbox-height;
  background: $unchecked-bg;
  border: $checkbox-height * .1 solid $unchecked-color;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: border-color ease $duration/2;
  -moz-transition: border-color ease $duration/2;
  -o-transition: border-color ease $duration/2;
  -webkit-transition: border-color ease $duration/2;
  cursor: pointer;
  &::before,&::after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: $checkbox-height * 0.2;
    background: $checked-color;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    content: '';
    -webkit-transition: opacity ease 0.5s;
    -moz-transition: opacity ease 0.5s;
    transition: opacity ease 0.5s;
  }
  &::before{
    top:$checkbox-height * 0.76;
    left: $checkbox-height * 0.31;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  &::after {
    top: $checkbox-height * .45;
    left: $checkbox-height * 0;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
input[type=checkbox]:checked + .cb-label,
.cb-label.checked{

  background: $checked-bg;
  border-color:$checked-bg;
  &::after{
    border-color:$checked-color;
    height: $checkbox-height * .35;
    -moz-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -o-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -webkit-animation: dothabottomcheck $duration/2 ease 0s forwards;
    animation: dothabottomcheck $duration/2 ease 0s forwards;
  }

  &::before{
    border-color:$checked-color;
    height: $checkbox-height * 1;
    -moz-animation: dothatopcheck $duration ease 0s forwards;
    -o-animation: dothatopcheck $duration ease 0s forwards;
    -webkit-animation: dothatopcheck $duration ease 0s forwards;
    animation: dothatopcheck $duration ease 0s forwards;
  }

}
@-moz-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}

@-webkit-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}

@keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35;  }
}

@keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-webkit-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-moz-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
纯css3改写checkbox、input、radio带动画的默认样式更改了checkboxcheckboxdemo2

checkboxdemo3

纯css3改写checkbox、input、radio带动画的默认样式checkboxdemo3

checkboxdemo4

纯css3改写checkbox、input、radio带动画的默认样式checkboxdemo4

input纯css3改写checkbox、input、radio带动画的默认样式input

on input Null

效果真是让人耳目一新，于是我借用了教义，写了一个简单版的demo。效果如下。它是使用灵活的布局和伪元素占位符来实现的。 纯css3改写checkbox、input、radio带动画的默认样式输入效果

  • 输入栏清除默认样式
  • 当输入栏聚焦时，输入栏原文上移，下方蓝线宽度从0变为100
  • 如果没有输入字段指定内容，也变成了无类型
    首先插入代码

    html 代码

    html 结构很简单，它使用 HTML 原生表单元素输入和标签；在“请输入内容”效果中的字符不是占位符而是一个标签，但它们也设置了占位符但透明度❙设置为0，因为我们需要根据是否显示占位符来设置其下方线条的宽度和标签的位置。 

div.input-container
    input type="input" id="input" placeholder="请输入内容"
    label for="input"
    div.bottom-line

完整html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="scss/main.css">
</head>
<body>
<div class="input-container">
    <input type="input" id="input" placeholder="请输入内容">
    <label for="input">请输入内容</label>
    <div class="bottom-line"></div>
</div>
</body>
</html>

css代码

所有动画效果仅使用css，但一些新功能浏览器兼容性不太好，兼容ie10。布局使用flex。动画效果使用变换。使用伪类占位符来确定是否指定了文本。如果输入文字，其下方的线宽将为100%；标签上的文字上移并缩小
代码如下：

$width: 500px;
$label-font-color: #3f4f5b;
$label-focus-font-color: rgb(82, 97, 108);
$border-bottom-color: #d5d5d5;
$focus-border-color: rgb(101, 141, 181);
$transform-top: 10px;
$transform-time: 0.3s;
$scale: 0.9;

.input-container {
  width: $width;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-flow: column-reverse;
  flex-flow: column-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 100px auto
}

.input-container input {
  -webkit-box-ordinal-group: 11;
  order: 10;
  -ms-flex-order: 10;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 0;
  font-size: 20px;
  border-bottom: 1px solid $border-bottom-color;
  text-indent: 10px;
}

.input-container input::-moz-placeholder {
  opacity: 0;
}

.input-container input::-webkit-input-placeholder {
  opacity: 0;
}

.input-container input:-ms-input-placeholder {
  opacity: 0;
}

.input-container input, .input-container label {
  transition: all $transform-time;
}

.input-container label {
  -webkit-box-ordinal-group: 101;
  -ms-flex-order: 100;
  order: 100;
  color: $label-font-color;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: translate(10px, 40px);
  transform: translate(0px, 40px);
}

.input-container .bottom-line {
  order: 2;
  width: 0;
  height: 2px;
  background: $focus-border-color;
  transition: all $transform-time;
}

.input-container input:focus {
  border-bottom-color: #fff;
}

.input-container input:focus ~ div, .input-container input:not(:placeholder-shown) ~ div {
  width: 100%
}

.input-container input:focus + label, .input-container input:not(:placeholder-shown) + label {
  color: $label-focus-font-color;
  -webkit-transform: translate(10px) scale($scale);
  transform: translate(10px) scale($scale)
}

作者：sunshine小小前
链接：https://juejin.im/post/591873170cef30369 来源：Nuggd'9
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Dreamweaver 主页设计和创建分步教程 下一篇：前端CSS居中、等分、多列、全屏布局终极解决方案干货
相关文章

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白