css实现文字数字立体缩放动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字数字立体缩放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
gap: 2vh;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(
0deg,
#ffffff calc(49.9% + 15vmin),
#ededed calc(50% + 15vmin)
);
}
.wrapper {
margin-left: 18vmin;
display: flex;
gap: 10vmin;
align-items: center;
justify-content: center;
filter: drop-shadow(-0.5vmin 0.5vmin 0 black)
drop-shadow(-1vmin 1vmin 0 black) drop-shadow(-1.5vmin 1.5vmin 0 black)
drop-shadow(-2vmin 2vmin 0 black) drop-shadow(-1px 1px 0 black)
drop-shadow(-1px -1px 0 black) drop-shadow(1px 1px 0 black)
drop-shadow(1px -1px 0 black);
}
.wrapper > div {
position: relative;
box-sizing: border-box;
}
.four,
.innerFour {
border-radius: 6vmin;
width: 0;
height: 20vmin;
border-left: 2px solid black;
box-shadow: 0 0 0 4vmin white, 0 0 0 4vmin white inset;
}
.innerFour {
position: absolute;
right: 15.25vmin;
height: 2vmin;
z-index: -1;
}
.four::before {
content.........完整代码请登录后点击上方下载按钮下载查看
网友评论0