如何设置此CSS动画复选框的样式？

我有这个复选框，选中后需要这个动画，请看视频：

我在下面尝试了这个，但是我不能使角变圆，加上我对复选框应用的不透明度

#subsDiv input[type="checkbox"]{
  appearance: none;
    background-color: transparent;
    border: 1px solid white;
    padding: 12px;
    border-radius: 6px;
  display: inline-block;
  vertical-align: top;
  margin-left: 0px;
  outline: none;
}

#subsDiv input[type="checkbox"]:hover {
  border-color: #609de6;
}

#subsDiv input[type="checkbox"]:checked {
  outline: none;
  background-position: 0px -24px;
  background-image: url(../img/check.png);
  border-color: #4a90e2;
  animation-name: checkbox;
  animation-duration: 400ms;
}


@keyframes checkbox {
  from{opacity: 1 ;outline: 2px solid #4a90e2; outline-offset: 0px;}
  to{opacity: 0 ;outline: 2px solid #4a90e2; outline-offset: 10px;}
}

---

您可以使用伪元素转换背景、不透明度和

transform:scale（）

来创建小边框效果，当您单击/选中该框时，该效果会爆炸

.cbl{
显示：块；
光标：指针；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
过渡：背景。5s；
}
.cb{
显示：无；
}
.cb：选中+0.cbl{
背景：蓝色；
}
.cb:选中+.cbl:：之后{
内容：'\2713'；
颜色：白色；
}
.cbl：：之前{
内容：''；
位置：绝对位置；
}
.cbl、.cbl:：之前{
宽度：1米；高度：1米；
边界半径：.25em；
边框：1px纯蓝色；
}
.cb:选中+.cbl:：之前{
变换：尺度（2）；
不透明度：0；
变换：变换.5s，不透明度.5s；
}

---

您可以使用伪元素转换背景、不透明度和

transform:scale（）

来创建当您单击/选中该框时爆炸的小边框效果

.cbl{
显示：块；
光标：指针；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
过渡：背景。5s；
}
.cb{
显示：无；
}
.cb：选中+0.cbl{
背景：蓝色；
}
.cb:选中+.cbl:：之后{
内容：'\2713'；
颜色：白色；
}
.cbl：：之前{
内容：''；
位置：绝对位置；
}
.cbl、.cbl:：之前{
宽度：1米；高度：1米；
边界半径：.25em；
边框：1px纯蓝色；
}
.cb:选中+.cbl:：之前{
变换：尺度（2）；
不透明度：0；
变换：变换.5s，不透明度.5s；
}

这很简单，但你需要证明你做了一些努力。试一试，如果你想不出来，写一篇带有代码的帖子，告诉我们你被卡在了哪一部分。请看一下我的代码谢谢你，提交了一个答案这很简单，但你需要证明你做了一些努力。试一试，如果你想不出来，写一篇带有代码的帖子，告诉我们你被卡在了什么地方。请看一下我的代码谢谢，提交了答案