纯css花卷折叠立体效果
代码语言:html
所属分类:动画
代码描述:纯css花卷折叠立体效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { background: radial-gradient(at center right, #222, #000); } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 100vh; -webkit-animation: crunch 4s 1s ease-in-out infinite; animation: crunch 4s 1s ease-in-out infinite; } @-webkit-keyframes crunch { 50% { -webkit-transform: scaleX(0.6); transform: scaleX(0.6); } } @keyframes crunch { 50% { -webkit-transform: scaleX(0.6); transform: scaleX(0.6); } } .card { display: -webkit-box; display: flex; width: 95vw; height: 22.5625vw; } .fold { -webkit-box-flex: 1; flex: 1; background: url(http://repo.bfw.wiki/bfwrepo/image/5eedc7af3f712.png); background-size: cover; -webkit-animation: 4s 1s ease-in-out infinite; animation: 4s 1s ease-in-out infinite; } .fold:nth-child(1) { background-position: 0%; } .fold:nth-child(2) { background-position: 25%; } .fold:nth-child(3) { background-position: 50%; } .fold:nth-child(4) { background-position: 75%; } .fold:nth-child(5) { background-posit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0