标签： 初始化
-
嵌入式开发常用C/C++知识与技巧
继续创造，加速成长！这是我参加「日新方案 6 月更文挑战」的第20天，点击查看活动概况
-
2022年都快结束了，还有人不会安卓录屏？在安卓上录制屏幕的的实现方式
持续创作，加速生长！这是我参与「日新计划 10 月更文应战」的第14天，点击查看活动详情
-
ViewModel， 不止MVVM
这是我参加11月更文挑战的第19天，活动概况检查：2021最后一次更文挑战
-
纯CSS实现消息展示过渡动画
消息的按次第骤变出现的要害在
transition-delay: calc(var(--index) * 0.1s);我们在每个style自界说了特色–index，控制了动画的推迟时间，就控制了每列的闪现间隔的过渡动画
总结
今天主要是要了解的是css自界说特色的美妙用法和scale3d的动画改动效果
点击input情况变为:checked的时分
input[type="checkbox"]:checked { & + .box:after { transform: translateY(-50%) scale3d(8, 6, 1); } & + .box .box__item { transform: translateX(0px); opacity: 1; visibility: visible; transition: all 0.5s ease-out; transition-delay: calc(var(--index) * 0.1s); transition-property: transform, opacity; } & + .box .icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E %3Cpath d='M437.5 386.6L306.9 256l130.6-130.6c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L256 205.1 125.4 74.5c-14.1-14.1-36.8-14.1-50.9 0-14.1 14.1-14.1 36.8 0 50.9L205.1 256 74.5 386.6c-14.1 14.1-14.1 36.8 0 50.9 14.1 14.1 36.8 14.1 50.9 0L256 306.9l130.6 130.6c14.1 14.1 36.8 14.1 50.9 0 14-14.1 14-36.9 0-50.9z'/%3E %3C/svg%3E "); } }这个控制了白色布景的改动，点击check的时分,x轴变为8倍，y轴变为6倍，z轴不变
& + .box:after { transform: translateY(-50%) scale3d(8, 6, 1); }消息的按次第骤变出现的要害在
transition-delay: calc(var(--index) * 0.1s);我们在每个style自界说了特色–index，控制了动画的推迟时间，就控制了每列的闪现间隔的过渡动画
总结
今天主要是要了解的是css自界说特色的美妙用法和scale3d的动画改动效果
box__item初始化烘托了对应的dom节点，设置了不可见的情况，点击input情况变为:checked的时分
input[type="checkbox"]:checked { & + .box:after { transform: translateY(-50%) scale3d(8, 6, 1); } & + .box .box__item { transform: translateX(0px); opacity: 1; visibility: visible; transition: all 0.5s ease-out; transition-delay: calc(var(--index) * 0.1s); transition-property: transform, opacity; } & + .box .icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E %3Cpath d='M437.5 386.6L306.9 256l130.6-130.6c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L256 205.1 125.4 74.5c-14.1-14.1-36.8-14.1-50.9 0-14.1 14.1-14.1 36.8 0 50.9L205.1 256 74.5 386.6c-14.1 14.1-14.1 36.8 0 50.9 14.1 14.1 36.8 14.1 50.9 0L256 306.9l130.6 130.6c14.1 14.1 36.8 14.1 50.9 0 14-14.1 14-36.9 0-50.9z'/%3E %3C/svg%3E "); } }这个控制了白色布景的改动，点击check的时分,x轴变为8倍，y轴变为6倍，z轴不变
& + .box:after { transform: translateY(-50%) scale3d(8, 6, 1); }消息的按次第骤变出现的要害在
transition-delay: calc(var(--index) * 0.1s);我们在每个style自界说了特色–index，控制了动画的推迟时间，就控制了每列的闪现间隔的过渡动画
总结
今天主要是要了解的是css自界说特色的美妙用法和scale3d的动画改动效果
我正在参与「码上挑战赛」概况请看：码上挑战赛来了！
（更多…）
