css-doodle实现3d点状阴影波纹动画效果

代码语言:html

所属分类:动画

代码描述:css-doodle实现3d点状阴影波纹动画效果

代码标签: 点状 阴影 波纹 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">
<css-doodle grid="21">
:container{
transform: skewX(-12deg);
transform-style: preserve-3d;
perspective: 700px;
}
:doodle {
grid-gap: 5px;
width: 75vh;
height: 75vh;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
background: #1d1e22;
border-radius:100%;
--scaledelay: calc((
(@abs(@abs(@row - @size-row/2) + @abs(@col - @size-col/2) - @size-col) / @size-col) - 1) * -1.5s) ;
animation-name: scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out.........完整代码请登录后点击上方下载按钮下载查看

网友评论0