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

栏目: 后端 · 前端 · 发布时间: 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. }

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

查看所有标签

猜你喜欢:

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

产品觉醒:产品经理的视角与方法论

产品觉醒:产品经理的视角与方法论

判官(李泽澄) / 电子工业出版社 / 2018-11 / 59.80元

《产品觉醒:产品经理的视角与方法论》是作者多年工作经验的汇集,通过自己亲身经历来对产品运营、行业和人生选择做一个全面的复盘,为读者提供有一定深度的分析。 《产品觉醒:产品经理的视角与方法论》共7章,第1章介绍了产品经理应该具有的视角来分析和观察产品分析方法;第2章介绍了做产品时如何破局来解决相应的问题;第3章介绍了在做产品经理前先分析自己;第4章介绍了怎么来解决执行力的问题;第5章介绍了怎么......一起来看看 《产品觉醒:产品经理的视角与方法论》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具