请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-5-16 08:32 编辑
我曾在《人类遗迹》帖子中使用CSS+JS实现过粒子特效,这个效果如果用 css-doodle 来做更是易如反掌。下面的代码,:doodle{} 选择器中设置了3d景深,:container{} 选择器设置了3d展现场景,各单元格设置好样式、位置、颜色、初始 transform 状态,最后执行关键帧动画飞回到原始定位的地点——
<css-doodle>
:doodle {
@grid: 16 / 600px 360px;
border: 1px solid tan;
perspective: 800px;
}
:container {
transform-style: preserve-3d;
background: radial-gradient(circle, black,navy);
}
@size: @r(3,6)px;
border-radius: 50%;
@place: @r(260,340)px @r(160,220)px;
background: rgba(@m3(@r(255)),@r(.6, .9));
transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);
animation: fly @r(20,40)s @r(-20,0)s infinite linear;
@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }
</css-doodle>
:container{} 选择器是单元格的直接容器,它的上层父元素是 :doodle {}。它平时基本不用,但在3d转换中,需要有三个层级的DOM结构,其中,一层元素提供景深,二层做容器(① 做3d展现场景;② 装载要做3d运动的子元素),三层就是要做3d运动的子元素;故而在此启用了它。
|