css+js实现羊群越过围栏数数动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现羊群越过围栏数数动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; padding: 0; margin: 0; } p, h1, h2, h3, h4 { display: inline-block; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } body { background-color: rgb(55, 29, 132); font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; } .wrapper { position: absolute; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sheep-route { width: 100%; height: calc(44 * 3px); overflow-x: hidden; } .sheep-wrapper, .sheep { position: absolute; transition: 0 linear; } .sheep-inner-wrapper { position: absolute; height: 100%; width: 100%; overflow: hidden; } .roll { transition: 0.8s; transform: rotate(-360deg); } .sheep::after { position: absolute; content: attr(baa); top: -20px; color: white; font-size: 15px; text-transform: lowercase; } .sprite { position: absolute; } .sheep.hide { opacity: 0; } .counter-wrapper { position: fixed; width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; } .counter { font-size: 24px; font-family: 'Press Start 2P'; color: white; transition: 0.4s; } .counter.enlarge { transform: scale(1.3); } .fence { position: absolute; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAB0CAYAAAAsCdrDAAAAAXNSR0IArs4c6QAAAp9JREFUeF7tm0tOxDAQRJnbsOU8nI/zsOU2oCB55CSOy5/udlU0LBGLvKmufo7RPD4/fn6/vt8fb8I/j9tAbCEop/GfxC0gthSUx+r58LeA2EZKFWTXiVtAqKZx6oRiGkUItZW7W63JGZIQ6aFz8SmN1cnY6eHlIHJj5w+vAlItthxEckR6rUinWgWQk7HzkqscDGGxFY7qVWOreOP5bp2vVjVv7C4ISp+8gjeKEGreOF3VHD95haPIJYSSN4oQtWIzyq8Kkb/plbYXy6VhUyfyI8jxWMIAcnkHq+SN6kWyijeaINi9Aa/0FbzRDMHsjSYIdm90QbB6owmiVmwGb0CI9JDM3miGQMVeeaYagmDzRhcEKvaqNIYh0HhFHgyHINi8MQWBxisqjSEINm90QzB6YxgCFTtyU5lArPbGFAQqdlQaZhBovDw3lQnEam+YQqDx8krDBGK1N6YhGLxhBoGK7bmpXCCivWEKgYrtlYYbBBovy03lAhHtDVcINF5WabhARHvDHGKFN9wgULEtN1UIhLc3XCFQsa3SCINA4zWzqUIgvL0RCoHGazSNEAhvb7hDRHgjDAIVe2ZTLYGw9kYoBCr2aBrLINB49WyqJRDW3lgKgcarNY0lENbeCIfw8MYyCFTsnk1FATHrjaUQqNitadBAoPGqbSoKiFlvUEGg8bpKgwJi1hvLISy8QQOBil3bVJQQvd6ggkDFvkqDFgKNV76pKCF6vUENgcYrpUEJ0esNOogRb9BCoGLnm0oCAnmDGgIVO6UhA1EbLwkI5A0piKvxkoBA3qCHaPGGDIR0sfPTaulr1dvvpJKQLfbxhiM/bqRkJJM4ekMaIo2XJMTRG3IQJW/IQuTeeEG0/mPQ8+8kZVfyhvQ4ya7Y2ybxBxeY0Hw8hFOCAAAAAElFTkSuQmCC); width: 98px; height: 232px; image-rendering: pixelated; background-repeat: no-repeat !important; background-size: 98px 232px !important; margin-left: calc(50% - 40px); } .sign { position: fixed; font-family: Arial, Helvetica, sans-serif; color: white; bottom: 10px; right: 10px; font-size: 10px; text-transform: none; } a { color: white; text-decoration: none; text-transform: none; } a:hover { text-decoration: underline; } </style> </head> <body > <head> <style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); </style> </head> <body> <div class="counter-wrapper"> <div class="counter">0</div> </div> <div class="wrapper"> <div class="sheep-route"> <div class="fence"></div> </div> </div> </body> <script > function init() { const sheepData = { svg: ({ fur, body }) => { return `<path fill="${fur}" d="M 107 1 h 3 v 1 h 1 v -1 h 4 v 1 h 4 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 1 h 1 v 2 h -1 v 2 h -1 v 2 h -2 v -1 h -2 v 1 h -1 v 1 h -7 v -1 h -1 v -1 h -4 v -3 h 2 v -2 h -3 v -1 h -1 v -2 h 1 v -1 h 2 v -1 h 1 v -1"/> <path fill="${fur}" d="M 11 2 h 3 v 1 h 2 v -1 h 5 v 1 h 4 v 1 h 1 v 3 h 1 v 6 h -2 v 1 h -1 v 2 h -2 v 1 h -4 v 1 h -3 v -1 h -3 v -2 h -4 v -1 h -3 v -1 h 2 v -1 h 1 v -1 h 1 v -2 h 2 v -2 h -3 v -1 h -1 v -2 h 3 v -1 h 1 v -1"/> <path fill="${fur}" d="M 48 2 h 2 v 1 h 5 v 2 h 2 v 1 h 1 v 7 h -3 v 1 h -1 v 1 h -1 v 1 h -7 v -1 h -8 v -1 h 2 v -1 h 1 v -2 h 1 v -1 h 1 v -2 h -2 v 1 h -1 v -1 h -2 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 1 v -1 h 6 v -1"/> <path fill="${fur}" d="M 78 2 h 4 v 1 h 1 v -1 h 4 v 1 h 1 v 2 h 2 v 2 h 1 v 4 h -1 v 2 h -4 v 1 h -1 v 1 h -1 v 1 h -4 v 1 h -2 v -1 h -1 v -1 h -4 v 1 h -2 v -1 h 1 v -1 h 1 v -1 h 3 v -2 h -1 v -1 h -5 v -3 h 1 v -1 h 2 v -2 h 1 v -1 h 2 v 1 h 1 v -1 h 1 v -1"/> <path fill="${body}" d="M 4 6 h 4 v 1 h 3 v 2 h -2 v 2 h -1 v 1 h -1 v 1 h -5 v -1 h -1 v -2 h 1 v -2 h 1 v -1 h 1 v -1"/> <path fill="${body}" d="M 99 6 h 5 v 1 h 3 v 2 h -2 v 3 h 4 v 3 h -1 v 1 h -1 v 1 h -2 v 1 h -2 v -1 h -1 v -2 h -2 v -3 h 1 v -1 h -3 v -1 h -1 v -1 h 1 v -2 h 1 v -1"/> <path fill="${body}" d="M 36 8 h 4 v 1 h 1 v -1 h 2 v 2 h -1 v 1 h -1 v 2 h -1 v 1 h -2 v 1 h -4 v -1 h -1 v -2 h 1 v -2 h 1 v -1 h 1 v -1"/> <path fill="${body}" d="M 69 10 h 6 v 1 h 1 v 2 h -3 v 1 h -1 v 1 h -1 v 1 h -4 v -1 h -1 v -2 h 1 v -1 h 1 v -1 h 1 v -1"/> <path fill="${body}" d="M 27 12 h 3 v 1 h 1 v 2 h -2 v 3 h -1 v 1 h -1 v -1 h -2 v -1 h -1 v -3 h 1 v -1 h 2 v -1"/> <path fill="${body}" d="M 118 12 h 2 v 1 h 1 v 1 h 1 v 5 h -4 v -1 h -1 v -1 h -1 v -3 h 1 v -1 h 1 v -1"/> <path fill="${body}" d="M 55 13 h 4 v 1 h 1 v 2 h -1 v 1 h -1 v 2 h -2 v -1 h -1 v -1 h -1 v -3 h 1 v -1"/> <path fill="${body}" d="M 86 13 h 3 v 3 h -1 v 2 h -1 v 1 h -3 v -1 h -1 v -2 h 1 v -1 h 1 v -1 h 1 v -1"/> <path fill="${fur}" d="M 109 13 h 1 v 1 h -1 v -1"/> <path fill="${body}" d="M 5 14 h 3 v 1 h 4 v 3 h -1 v 1 h -1 v 1 h -3 v -2 h -3 v -2 h 1 v -2"/> <path fill="${body}" d="M 38 15 h 3 v 1 h 1 v -1 h 4 v 1 h -1 v 2 h -1 v 3 h -3 v -1 h -2 v 1 h -1 v -1 h -1 v -3 h 1 v -2"/> <path fill="${body}" d="M 73 15 h 4 v 1 h 1 v 2 h 1 v 1 h 1 v 1 h -1 v 1 h -3 v -1 h -1 v 1 h -2 v -1 h -1 v -4 h 1 v -1"/>`; }, data: [], count: 0 }; const sheepColours = [ { fur: '#fff', body: '#100c45' }, { fur: '#fff', body: '#100c45' }, { fur: '#fff', body: '#100c45' }, { fur: '#fff', body: '#100c45' }, { fur: '#fff', body: '#100c45' }, { fur: '#fff', body: '#100c45' }, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0