html+css实现跳动足球_html跳动球资源-CSDN文库

共2个文件

png：1个

html：1个

html

css3动画

需积分: 2 193 浏览量 2022-12-23 23:33:02 上传评论收藏 168KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

跳动足球.rar （2个子文件）

跳动足球

football.png 169KB

football.html 3KB

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>a football for you!</title> </head> <style> html { height: 100%; FILTER: gray; -webkit-filter: grayscale(100%); } .Loading { position: absolute; background-color: rgba(255, 255, 255, 0.2); left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: flex; /*多轮布局*/ align-items: center; /*垂直*/ justify-content: center; /*水平*/ z-index: 9999 } .laodingCon { width: 50px; height: 120px; } .ball { -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; -ms-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; -moz-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; height: 50px; width: 50px; background: url(./football.png) no-repeat center; background-size: 100%; border-radius: 80% } .ballshadow { -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; background: #000; bottom: -90px; height: 15px; width: 50px; -webkit-animation-delay: 0; animation-delay: 0; border-radius: 100%; } @-webkit-keyframes ball { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } } @keyframes ball { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } } @-webkit-keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0.05; -webkit-transform: scale(1); transform: scale(1); } } @keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0.05; -webkit-transform: scale(1); transform: scale(1); } } </style> <body> <div id="_loading_page" class="Loading"> <div class="laodingCon"> <div class="ball"></div> <div class="ballshadow"></div> </div> </div> </body> </html>

评论收藏

内容反馈