纯css布局实现奔跑的厕纸卫生纸动画效果
代码语言:html
所属分类:动画
代码描述:纯css布局实现奔跑的厕纸卫生纸动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { font-size: 2.9vmin; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #19b6ff), color-stop(50%, #222), color-stop(#222), to(#ccc)); background: linear-gradient(to bottom, #19b6ff 50%, #222 50%, #222 calc(50% + 0.25rem), #ccc calc(50% + 0.25rem)); -webkit-perspective: 3rem; perspective: 3rem; } body * { box-sizing: border-box; } body #sidewalk { position: absolute; width: 400vw; height: 100vh; top: calc(50% + 0.25rem); background: repeating-linear-gradient(to right, #222, #222 0.15rem, transparent 0.15rem, transparent 10rem); z-index: 0; left: -100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateX(0) rotateX(10deg); transform: translateX(0) rotateX(10deg); -webkit-transform-origin: top; transform-origin: top; -webkit-animation: sidewalk 0.5s linear infinite; animation: sidewalk 0.5s linear infinite; } @-webkit-keyframes sidewalk { to { -webkit-transform: translateX(10rem) rotateX(10deg); transform: translateX(10rem) rotateX(10deg); } } @keyframes sidewalk { to { -webkit-transform: translateX(10rem) rotateX(10deg); transform: translateX(10rem) rotateX(10deg); } } body #sidewalk:before { content: ''; position: absolute; width: 100%; height: 10%; top: calc(-10% - 0.25rem); left: 0; -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(0.15rem, #222), color-stop(0.15rem, #60d54a)); background: linear-gradient(to bottom, #222, #222 0.15rem, #60d54a 0.15rem); } body .wrap { width: 10rem; height: 10rem; z-index: 2; position: absolute; } body .wrap:nth-of-type(2) { top: calc(50% + 10rem); -webkit-transform: scaleY(-1) skewX(-40deg) translateX(5rem); transform: scaleY(-1) skewX(-40deg) translateX(5rem); -webkit-filter: brightness(0) blur(3px); filter: brightness(0) blur(3px); opacity: 0.05; } body .wrap:nth-of-type(2) .roll { -webkit-animation: charge3 2s ease-in-out infinite alternate, charge4 1s ease-in-out infinite alternate; animation: charge3 2s ease-in-out infinite alternate, charge4 1s ease-in-out infinite alternate; } @-webkit-keyframes charge3 { to { -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2); transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2); } } @keyframes charge3 { to { -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2); transform: translateX(-3rem) scale(0.9) skewX(5deg) scaleY(1.2); } } @-webkit-keyframes charge4 { to { left: calc(50% - 10rem); top: calc(50% - 6.5rem); } } @keyframes charge4 { to { left: calc(50% - 10rem); top: calc(50% - 6.5rem); } } body .wrap .roll { width: 7rem; height: 7rem; top: calc(50% - 3.5rem); position: absolute; left: calc(50% - 5rem); -webkit-animation: charge 2s ease-in-out infinite alternate, charge2 1s ease-in-out infinite alternate; animation: charge 2s ease-in-out infinite alternate, charge2 1s ease-in-out infinite alternate; } @-webkit-keyframes charge { to { -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg); transform: translateX(-3rem) scale(0.9) skewX(5deg); } } @keyframes charge { to { -webkit-transform: translateX(-3rem) scale(0.9) skewX(5deg); transform: translateX(-3rem) scale(0.9) skewX(5deg); } } @-webkit-keyframes charge2 { to { left: calc(50% - 10rem); top: calc(50% - 0.5rem); } } @keyframes charge2 { to { left: calc(50% - 10rem); top: calc(50% - 0.5rem); } } body .wrap .roll .body { position: absolute; width: 100%; height: 100%; left: 0; top: 0; box-shadow: -0.25rem 0 0 0 #222, 0.25rem 0 0 #fff; background: #fff; -webkit-animation: bounce 0.125s ease-in-out infinite alternate; animation: bounce 0.125s ease-in-out infinite alternate; } @-webkit-keyframes bounce { from { -webkit-transform: rotate(-2.5deg) translateY(0rem); transform: rotate(-2.5deg) translateY(0rem); } to { -webkit-transform: rotate(2.5deg) translateY(0.25rem); transform: rotate(2.5deg) translateY(0.25rem); } } @keyframes bounce { from { -webkit-transform: rotate(-2.5deg) translateY(0rem); transform: rotate(-2.5deg) translateY(0rem); } to { -webkit-transform: rotate(2.5deg) translateY(0.25rem); transform: rotate(2.5deg) translateY(0.25rem); } } body .wrap .roll .body:before, body .wrap .roll .body:after { content: ''; height: 4rem; width: 7rem; border-radius: 350rem / 200rem; position: absolute; box-shadow: 0 0 0 0.25rem #222; left: 0; top: -2rem; } body .wrap .roll .body:before { background: radial-gradient(ellipse at center, #222 1rem, #fff 1rem); } body .wrap .roll .body:after { border: 0.25rem solid #222; border-color: transparent #222 #222 #222; box-shadow: none; left: -0.25rem; bottom: -2rem; top: auto; background: #fff; z-index: 9; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #000)); -webkit-mask: linear-gradient(to bottom, transparent 50%, #000 50%); mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #000)); mask: linear-gradient(to bottom, transparent 50%, #000 50%); } body .wrap .roll .leg { position: absolute; width: 0.5rem; height: 0.5rem; bottom: -1.5rem; border-radius: 100%; left: 1.5rem; z-index: -1; -webkit-transform: scaleX(-1) rotate(0deg); transform: scaleX(-1) rotate(0deg); -webkit-animation: run2 0.25s linear infinite alternate; animation: run2 0.25s linear infinite alternate; } body .wrap .roll .leg:last-of-type { -webkit-animation-delay: -0.125s; animation-delay: -0.125s; left: 4rem; bottom: -2.25rem; } body .wrap .roll .leg:last-of-type .inner { -webkit-animation-delay: -0.125s; animation-delay: -0.125s; } body .wrap .roll .leg:last-of-type .inner .segment:last-of-type:before { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(1) { -webkit-animation-delay: -0.1277777778s; animation-delay: -0.1277777778s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(2) { -webkit-animation-delay: -0.1305555556s; animation-delay: -0.1305555556s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(3) { -webkit-animation-delay: -0.1333333333s; animation-delay: -0.1333333333s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(4) { -webkit-animation-delay: -0.1361111111s; animation-delay: -0.1361111111s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(5) { -webkit-animation-delay: -0.1388888889s; animation-delay: -0.1388888889s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(6) { -webkit-animation-delay: -0.1416666667s; animation-delay: -0.1416666667s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(7) { -webkit-animation-delay: -0.1444444444s; animation-delay: -0.1444444444s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(8) { -webkit-animation-delay: -0.1472222222s; animation-delay: -0.1472222222s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(9) { -webkit-animation-delay: -0.15s; animation-delay: -0.15s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(10) { -webkit-animation-delay: -0.1527777778s; animation-delay: -0.1527777778s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(11) { -webkit-animation-delay: -0.1555555556s; animation-delay: -0.1555555556s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(12) { -webkit-animation-delay: -0.1583333333s; animation-delay: -0.1583333333s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(13) { -webkit-animation-delay: -0.1611111111s; animation-delay: -0.1611111111s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(14) { -webkit-animation-delay: -0.1638888889s; animation-delay: -0.1638888889s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(15) { -webkit-animation-delay: -0.1666666667s; animation-delay: -0.1666666667s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(16) { -webkit-animation-delay: -0.1694444444s; animation-delay: -0.1694444444s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(17) { -webkit-animation-delay: -0.1722222222s; animation-delay: -0.1722222222s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(18) { -webkit-animation-delay: -0.175s; animation-delay: -0.175s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(19) { -webkit-animation-delay: -0.1777777778s; animation-delay: -0.1777777778s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(20) { -webkit-animation-delay: -0.1805555556s; animation-delay: -0.1805555556s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(21) { -webkit-animation-delay: -0.1833333333s; animation-delay: -0.1833333333s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(22) { -webkit-animation-delay: -0.1861111111s; animation-delay: -0.1861111111s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(23) { -webkit-animation-delay: -0.1888888889s; animation-delay: -0.1888888889s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(24) { -webkit-animation-delay: -0.1916666667s; animation-delay: -0.1916666667s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(25) { -webkit-animation-delay: -0.1944444444s; animation-delay: -0.1944444444s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(26) { -webkit-animation-delay: -0.1972222222s; animation-delay: -0.1972222222s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(27) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(28) { -webkit-animation-delay: -0.2027777778s; animation-delay: -0.2027777778s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(29) { -webkit-animation-delay: -0.2055555556s; animation-delay: -0.2055555556s; } body .wrap .roll .leg:last-of-type .inner .segment:nth-of-type(30) { -webkit-animation-delay: -0.2083333333s; animation-delay: -0.2083333333s; } @-webkit-keyframes run2 { to { -webkit-transform: scaleX(-1) rotate(60deg); transform: scaleX(-1) rotate(60deg); } } @keyframes run2 { to { -webkit-transform: scaleX(-1) rotate(60deg); transform: scaleX(-1) rotate(60deg); } } body .wrap .roll .leg .inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-animation: run3 0.25s linear infinite alternate; animation: run3 0.25s linear infinite alternate; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } @-webkit-keyframes run3 { to { -webkit-transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg); transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg); } } @keyframes run3 { to { -webkit-transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg); transform: translateX(-0.5rem) translateY(-0.5rem) rotate(50deg); } } body .wrap .roll .leg .segment { position: absolute; width: 100%; height: 100%; border-radius: 100%; left: 0; background: #222; -webkit-animation: run 0.25s linear infinite alternate; animation: run 0.25s linear infinite alternate; } body .wrap .roll .leg .segment:last-of-type:before { content: ''; position: absolute; width: 250%; height: 100%; border-radius: 800rem; left: 0; bottom: 0; background: #222; -webkit-transform-origin: left; transform-origin: left; } body .wrap .roll .leg .segment:nth-of-type(1) { -webkit-transform-origin: 0.0833333333rem -0.25rem; transform-origin: 0.0833333333rem -0.25rem; } body .wrap .roll .leg .segment:nth-of-type(2) { -webkit-transform-origin: 0.1666666667rem -0.5rem; transform-origin: 0.1666666667rem -0.5rem; } body .wrap .roll .leg .segment:nth-of-type(3) { -webkit-transform-origin: 0.25rem -0.75rem; transform-origin: 0.25rem -0.75rem; } body .wrap .roll .leg .segment:nth-of-type(4) { -webkit-transform-origin: 0.3333333333rem -1rem; transform-origin: 0.3333333333rem -1rem; } body .wrap .roll .leg .segment:nth-of-type(5) { -webkit-transform-origin: 0.4166666667rem -1.25rem; transform-origin: 0.4166666667rem -1.25rem; } body .wrap .roll .leg .segment:nth-of-type(6) { -webkit-transform-origin: 0.5rem -1.5rem; transform-origin: 0.5rem -1.5rem; } body .wrap .roll .leg .segment:nth-of-type(7) { -webkit-transform-origin: 0.5833333333rem -1.75rem; transform-origin: 0.5833333333rem -1.75rem; } body .wrap .roll .leg .segment:nth-of-type(8) { -webkit-transform-origin: 0.6666666667rem -2rem; transform-origin: 0.6666666667rem -2rem; } body .wrap .roll .leg .segment:nth-of-type(9) { -webkit-transform-origin: 0.75rem -2.25rem; transform-origin: 0.75rem -2.25rem; } body .wrap .roll .leg .segment:nth-of-type(10) { -webkit-transform-origin: 0.8333333333rem -2.5rem; transform-origin: 0.8333333333rem -2.5rem; } body .wrap .roll .leg .segment:nth-of-type(11) { -webkit-transform-origin: 0.9166666667rem -2.75rem; transform-origin: 0.9166666667rem -2.75rem; } body .wrap .roll .leg .segment:nth-of-type(12) { -webkit-transform-origin: 1rem -3rem; transform-origin: 1rem -3rem; } body .wrap .roll .leg .segment:nth-of-type(13) { -webkit-transform-origin: 1.0833333333rem -3.25rem; transform-origin: 1.0833333333rem -3.25rem; } body .wrap .roll .leg .segment:nth-of-type(14) { -webkit-transform-origin: 1.1666666667rem -3.5rem; transform-origin: 1.1666666667rem -3.5rem; } body .wrap .roll .leg .segment:nth-of-type(15) { -webkit-transform-origin: 1.25rem -3.75rem; transform-origin: 1.25rem -3.75rem; } body .wrap .roll .leg .segment:nth-of-type(16) { -webkit-transform-origin: 1.3333333333rem -4rem; transform-origin: 1.3333333333rem -4rem; } body .wrap .roll .leg .segment:nth-of-type(17) { -webkit-transform-origin: 1.4166666667rem -4.25rem; transform-origin: 1.4166666667rem -4.25rem; } body .wrap .roll .leg .segment:nth-of-type(18) { -webkit-transform-origin: 1.5rem -4.5rem; transform-origin: 1.5rem -4.5rem; } body .wrap .roll .leg .segment:nth-of-type(19) { -webkit-transform-origin: 1.5833333333rem -4.75rem; transform-origin: 1.5833333333rem -4.75rem; } body .wrap .roll .leg .segment:nth-of-type(20) { -webkit-transform-origin: 1.6666666667rem -5rem; transform-origin: 1.6666666667rem -5rem; } body .wrap .roll .leg .segment:nth-of-type(21) { -webkit-transform-origin: 1.75rem -5.25rem; transform-origin: 1.75rem -5.25rem; } body .wrap .roll .leg .segment:nth-of-type(22) { -webkit-transform-origin: 1.8333333333rem -5.5rem; transform-origin: 1.8333333333rem -5.5rem; } body .wrap .roll .leg .segment:nth-of-type(23) { -webkit-transform-origin: 1.9166666667rem -5.75rem; transform-origin: 1.9166666667rem -5.75rem; } body .wrap .roll .leg .segment:nth-of-type(24) { -webkit-transform-origin: 2rem -6rem; transform-origin: 2rem -6rem; } body .wrap .roll .leg .segment:nth-of-type(25) { -webkit-transform-origin: 2.0833333333rem -6.25rem; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0