css实现文字字母三维抖动新年快乐动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字字母三维抖动新年快乐动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<style>
*,
*:before,
*:after {
box-sizing: border-box;
cursor: url("//repo.bfw.wiki/bfwrepo/image/5e56f73fda0cd.pngg") 32 32, default;
}
body {
width: 100vw;
height: 100vh;
font-family: 'Russo One', sans-serif;
font-weight: 900;
font-size: 150px;
background-color: #111;
}
.inspiration {
position: fixed;
bottom: 0;
right: 0;
padding: 10px;
font-size: 12px;
}
.inspiration img {
width: 25px;
filter: invert(0.8);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.year {
position: absolute;
font-weight: 900;
transform: translate(-50%, -50%);
-webkit-animation: move 3s ease-in-out infinite;
animation: move 3s ease-in-out infinite;
will-change: transform;
}
.year:first-child:hover,
.year:first-child:hover ~ .year {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.year:nth-child(1) {
color: #fff;
z-index: 13;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
--move: 20px;
}
.year:nth-child(2) {
color: #fbca00;
z-index: 12;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0