div+css实现文字入场变形动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现文字入场变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> section { background: #9ce5c7; height: 20vmin; width: 15vmin; } section:not(first-of-type) { margin-inline-start: -1vmin; } section:nth-child(1) { clip-path: polygon( 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%, 0 0 ); animation: h 0.5s ease forwards 1s; } @keyframes h { 100% { clip-path: polygon( 0 0, 15% 0, 15% 40%, 75% 40%, 75% 0, 90% 0, 90% 100%, 75% 100%, 75% 50%, 15% 50%, 15% 100%, 0 100%, 0 0 ); } } section:nth-child(2) { clip-path: polygon( 0 0, 100% 0, 100% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0 ); animation: e 0.5s ease forwards 1.25s; } @keyframes e { 100% { clip-path: polygon( 5% 0, 85% 0, 85% 10%, 20% 7%, 20% 40%, 70% 40%, 70% 50%, 20% 50%, 20% 93%, 85% 90%, 85% 100%, 5% 100%, 5% 0 ); } } section:nth-child(3) { clip-path: polygon(0 0, 100% 0, 100% 0%, 100% 50%, 100% 100%, 0 100%); animation: l1 0.5s ease forwards 1.5s; } @keyframes l1 { 100% { clip-path: po.........完整代码请登录后点击上方下载按钮下载查看
网友评论0