码迷,mamicode.com
首页 > Web开发 > 详细

[CSS] Using transform: scale(0) for hiding element

时间:2021-03-06 14:44:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:cte   play   splay   check   sel   radio   ansi   NPU   button   

For a radio button control, when hide selected status, we can use:

      .input__control::before {
          content: "";
          width: 0.5em;
          height: 0.5em;
          // box-shadow works better than background-color on printable version
          box-shadow: inset 1em 1em var(--color-primary, color("primary"));
          border-radius: 50%;
          // using as display none
          transform: scale(0);
          transition: 180ms transform ease-in-out;
      }

      input:checked + .input__control::before {
        transform: scale(1);
      }

It is easy to apply animation to it as well.

[CSS] Using transform: scale(0) for hiding element

标签:cte   play   splay   check   sel   radio   ansi   NPU   button   

原文地址:https://www.cnblogs.com/Answer1215/p/14488669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!