多选和单选按钮的切换动画

栏目: 后端 · 前端 · 发布时间: 5年前

核心属性

-webkit-appearance: none 消除元素的默认外观

:hover/:checked + transition + background 背景颜色的过渡效果

text-align: center + line-height: 40px 对勾符号水平垂直居中显示

animation + width + height + opacity 按钮状态切换的动画效果

提示:::after伪元素实现的动画的中心点与单选多选按钮的中心点是对齐的,对齐的方法就是将伪元素上移和左移80px的距离,这个距离是通过200px ÷ 2 - 40px ÷ 2 = 80px计算得出的。

  1. <div class="container">
  2. <div>
  3. <label>
  4. <input type="checkbox" class="option-input checkbox" checked />
  5. 选项一
  6. </label>
  7. <label>
  8. <input type="checkbox" class="option-input checkbox" />
  9. 选项二
  10. </label>
  11. <label>
  12. <input type="checkbox" class="option-input checkbox" />
  13. 选项三
  14. </label>
  15. </div>
  16. <div>
  17. <label>
  18. <input type="radio" class="option-input radio" name="example" checked />
  19. 选项一
  20. </label>
  21. <label>
  22. <input type="radio" class="option-input radio" name="example" />
  23. 选项二
  24. </label>
  25. <label>
  26. <input type="radio" class="option-input radio" name="example" />
  27. 选项三
  28. </label>
  29. </div>
  30. </div>
  1. body {
  2. color: #9faab7;
  3. background: #e8ebee;
  4. }
  5. body div {
  6. padding: 1rem;
  7. }
  8. body label {
  9. display: block;
  10. line-height: 40px;
  11. }
  12. .option-input {
  13. position: relative;
  14. display: inline-block;
  15. top: 13.33333px;
  16. height: 40px;
  17. width: 40px;
  18. margin-right: 0.5rem;
  19. color: #fff;
  20. background: #cbd1d8;
  21. outline: none;
  22. cursor: pointer;
  23. -webkit-appearance: none;
  24. transition: all 0.15s ease-out 0s;
  25. z-index: 1;
  26. }
  27. .option-input:hover {
  28. background: #9faab7;
  29. }
  30. .option-input:checked {
  31. background: #40e0d0;
  32. }
  33. .option-input:checked::before {
  34. content: '✔';
  35. position: absolute;
  36. display: inline-block;
  37. height: 40px;
  38. width: 40px;
  39. font-size: 26.66667px;
  40. text-align: center;
  41. line-height: 40px;
  42. }
  43. .option-input:checked::after {
  44. content: '';
  45. position: relative;
  46. background: #40e0d0;
  47. display: block;
  48. animation: click-wave 0.65s;
  49. }
  50. @keyframes click-wave {
  51. 0% {
  52. height: 40px;
  53. width: 40px;
  54. opacity: 0.35;
  55. }
  56. 100% {
  57. height: 200px;
  58. width: 200px;
  59. margin-left: -80px;
  60. margin-top: -80px;
  61. opacity: 0;
  62. }
  63. }
  64. .option-input.radio {
  65. border-radius: 50%;
  66. }
  67. .option-input.radio::after {
  68. border-radius: 50%;
  69. }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX编程环境

UNIX编程环境

Brian W.Kernighan、Rob Pike / 陈向群/等 / 机械工业出版社 / 1999-10-1 / 24.00

本书对UNIX操作系统的编程环境做了详细而深入的讨论,内容包括UNIX的文件系统、Shell、过滤程序、I/O编程、系统调用等,并对UNIX中的程序开发方法做了有针对性的指导。本书内容深入浅出,实例丰富,无论是UNIX系统的初学者还是专业人员都可从本书受益。本书亦可作为大学生、研究生学习UNIX的教材。一起来看看 《UNIX编程环境》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具