div+css实现日落建筑工地塔吊电焊工人工作的场景动画代码
代码语言:html
所属分类:动画
代码描述:div+css实现日落建筑工地塔吊电焊工人工作的场景动画代码,将工作在一线的广大工人致敬。
代码标签: div css 日落 建筑 工地 塔吊 电焊 工人 工作场景 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } path { stroke: #000000; fill: #000000; } .page-wrapper { overflow: hidden; } .sky { background: linear-gradient(to bottom, #000508 0%, #163C52 25%, #4F4F47 40%, #C5752D 53%, #B7490F 85%, #2F1107 100%); width: 100%; height: 75vh; } .sky .component-wrapper { position: relative; } .sky .sun { position: absolute; width: 200px; height: 200px; top: 45%; left: 20%; border-radius: 50%; background: radial-gradient(circle, #ffe483 0%, #ffc700 10%, #ff8117 11%, #f5740300 35%, #f5740300 100%); } .sky .svg-image { position: absolute; bottom: -7px; left: 0; right: 0; margin: auto; width: 80%; max-height: 75vh; } .sky .background-left { width: 60%; margin-left: -36px; transform: scaleX(-1); bottom: -15px; } .sky .background-right { margin-right: 0; } .sky .background { width: 100%; margin: 0 -20px; margin-bottom: -10px; } .sky .background-grid { display: flex; width: 100%; box-sizing: border-box; position: absolute; left: 0; right: 0; bottom: -5px; top: 0; align-items: flex-end; } .sky .limit { max-height: 75vh; max-width: 100vh; width: calc((768/1024) * 107%); bottom: 0; } .sky .light-wrapper, .sky .weld-wrapper, .sky .spark-wrapper { position: relative; padding-bottom: calc((768/1024) * 100%); height: 0; } .ground { background: black; width: 100%; height: 25vh; } .svg-components { position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 75vh; margin: auto; margin-left: -10%; } .svg-components svg { position: absolute; height: 100%; width: 80%; left: 0; bottom: -7px; right: 0; margin: auto; max-height: calc(80vw / 1.33); margin-right: 0; } .container { position: relative; } .light-bar { transform: rotate(4deg) translateX(15px); display: flex; justify-content: space-between; width: 85%; position: absolute; height: 100%; bottom: -18%; } .light.red { visibility: visible; opacity: 1; width: 1px; height: 1px; box-shadow: 0 0 5px 5px #ff1818; background-color: #ff1818; -webkit-animation: strobe 3s steps(2, start) infinite; animation: strobe 3s steps(2, start) infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .light.top { position: absolute; top: 9%; right: 29%; } .material.hidden { visibility: hidden; } .material path { -webkit-animation: move-trolly-components 45s infinite; animation: move-trolly-components 45s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .hook { -webkit-animation: move-trolly-components 45s infinite; animation: move-trolly-components 45s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .cable { stroke-width: 1; stroke: black; stroke-dasharray: 485; stroke-dashoffset: 485; -webkit-animation: move-cable 45s infinite, move-trolly-components 45s infinite; animation: move-cable 45s infinite, move-trolly-components 45s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .material, .trolly-movement, .cable, .hook { --transX1: -55%; --transX2: -50%; --transX3: -5%; --transX4: -5%; --transY1: -6.5%; --transY2: -6.5%; --transY3: 0%; --transY4: 0%; --scale1: 1.1; --scale2: 1; } .hook, .material { --transY1: 55%; --transY2: -6.5%; --transY3: 0%; --transY4: 55%; } .trolly-movement { -webkit-animation: move-trolly-components 45s infinite; animation: move-trolly-components 45s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .spark { position: relative; width: 10%; margin-top: -20px; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .weld-container, .spark-container { width: 10px; height: 10px; position: absolute; } .weld-container:first-child, .spark-container:first-child { left: 81.2%; top: 50.2%; } .weld-container:last-child, .spark-container:last-child { left: 52%; top: 71.9%; } .weld { opacity: 0; width: 10px; height: 10px; border-radius: 50%; -webkit-animation: welding 8s infinite; animation: welding 8s infinite; background: radial-gradient(circle, #ffffff 0%, #DDEDFF 25%, #e1ecf9 35%, #cee4ff 40%, #badaff 50%, rgba(186, 218, 255, 0.4) 80%, rgba(186, 218, 255, 0.1) 100%); } .particle { opacity: 0; position: absolute; background-color: #fffbd1; } .particle.negative-X { -webkit-animation: sparks-neg-X 0.7s infinite, welding 8s infinite; animation: sparks-neg-X 0.7s infinite, welding 8s infinite; } .particle.positive-X { -webkit-animation: sparks-pos-X 0.7s infinite, welding 8s infinite; animation: sparks-pos-X 0.7s infinite, welding 8s infinite; } @-webkit-keyframes welding { 0% { opacity: 0; } 1% { opacity: 1; } 2% { opacity: 0; } 3% { opacity: 1; } 4% { opacity: 0; } 5% { opacity: 1; } 11% { opacity: 1; } 12% { opacity: 0; } 13% { opacity: 1; } 59% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } } @keyframes welding { 0% { opacity: 0; } 1% { opacity: 1; } 2% { opacity: 0; } 3% { opacity: 1; } 4% { opacity: 0; } 5% { opacity: 1; } 11% { opacity: 1; } 12% { opacity: 0; } 13% { opacity: 1; } 59% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes sparks-neg-X { 0% { opacity: 1; transform: translateY(0%); } 95% { opacity: 1; } 100% { opacity: 0; transform: translateY(1500%) translateX(-5px); } } @keyframes sparks-neg-X { 0% { opacity: 1; transform: translateY(0%); } 95% { opacity: 1; } 100% { opacity: 0; transform: translateY(1500%) translateX(-5px); } } @-webkit-keyframes sparks-pos-X { 0% { opacity: 1; transform: translateY(0%) rotate(0deg); } 93% { opacity: 1; } 100% { opacity: 0; transform: translateY(1500%) translateX(5px); } } @keyframes sparks-pos-X { 0% { opacity: 1; transform: translateY(0%) rotate(0deg); } 93% { opacity: 1; } 100% { opacity: 0; transform: translateY(1500%) translateX(5px); } } @-webkit-keyframes strobe { to { visibility: hidden; opacity: 0; } } @keyframes strobe { to { visibility: hidden; opacity: 0; } } @-webkit-keyframes move-trolly-components { 0% { transform: translateX(var(--transX1)) translateY(var(--transY1)) scale(var(--scale1)); } 25% { transform: translateX(var(--transX2)) translateY(var(--transY2)) scale(var(--scale1)); } 75% { transform: translateX(var(--transX3)) translateY(var(--transY3)) scale(var(--scale2)); } 100% { transform: translateX(var(--transX4)) translateY(var(--transY4)) scale(var(--scale2)); } } @keyframes move-trolly-components { 0% { transform: translateX(var(--transX1)) translateY(var(--transY1)) scale(var(--scale1)); } 25% { transform: translateX(var(--transX2)) translateY(var(--transY2)) scale(var(--scale1)); } 75% { transform: translateX(var(--transX3)) translateY(var(--transY3)) scale(var(--scale2)); } 100% { transform: translateX(var(--transX4)) translateY(var(--transY4)) scale(var(--scale2)); } } @-webkit-keyframes move-cable { 0% { stroke-dashoffset: 970; } 25% { stroke-dashoffset: 543; } 75% { stroke-dashoffset: 543; } 100% { stroke-dashoffset: 970; } } @keyframes move-cable { 0% { stroke-dashoffset: 970; } 25% { stroke-dashoffset: 543; } 75% { stroke-dashoffset: 543; } 100% { stroke-dashoffset: 970; } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="page-wrapper"> <div class="sky"> <div class="component-wrapper"> <div class="sun"></div> <div class="background-grid"> <div class="background one"><img class="" src="//repo.bfw.wiki/bfwrepo/images/build/background-1.svg" /></div> <div class="background two"><img class="" src="//repo.bfw.wiki/bfwrepo/images/build/background-2.svg" /></div> <div class="background three"><img class="" src="//repo.bfw.wiki/bfwrepo/images/build/background-3.svg" /></div> <div class="background four"><img class="" src="//repo.bfw.wiki/bfwrepo/images/build/background-4.svg" /></div> </div> <div class="svg-image limit"> <div class="weld-wrapper"> <div class="weld-container"> </div> <div class="weld-container"> </div> </div> </div> <img class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0