svg雪糕布局动画
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .slice-1, .drop { fill: #FF82C1; } .slice-2 { fill: #A6009B; } .slice-3 { fill: #5633AB; } .stick { stroke: #E8C37E; } body { margin: 0; } svg { display: block; width: 100vw; height: 100vh; } svg * { transform-box: fill-box; transform-origin: bottom; } .popsicle { animation: hover 5.6s infinite; } @keyframes hover { 0% { transform: translateY(-45px); } 23.5% { transform: translateY(-45px); } 25% { transform: translateY(-30px); } 26.8571428571% { transform: translateY(-30px); } 28.5714285714% { transform: translateY(-15px); } 30.2142857143% { transform: translateY(-15px); } 32.1428571429% { transform: translateY(0px); } 100% { transform: translateY(-45px); } } @keyframes slice-in-1 { 0% { visibility: hidden; } 17.8571428571% { opacity: 0; visibility: hidden; transform: translateY(-730px) scaleY(1.2); } 19.2857142857% { opacity: 1; } 23.5% { transform: translateY(-20px) scaleY(1.2); animation-timing-function: ease-out; } 25% { transform: none; } 95% { opacity: 1; } 100% { transform: none; opacity: 0; } } @keyframes slice-in-2 { 0% { visibility: hidden; } 21.4285714286% { opacity: 0; visibility: hidden; transform: translateY(-730px) scaleY(1.2); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0