css布局实现一个放炮的钢铁侠动画效果代码-html代码-BFW代码库

css布局实现一个放炮的钢铁侠动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现一个放炮的钢铁侠动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          box-sizing: border-box;
          position: relative;
        }
        *::after, *::before {
          box-sizing: border-box;
          content: "";
          position: absolute;
        }
        
        body {
          height: 100vh;
          width: 100vw;
          align-items: center;
          background-color: #fefefe;
          display: flex;
          justify-content: center;
          margin: 0;
          overflow: hidden;
        }
        
        .ironman {
          height: 80vmin;
          width: 60vmin;
          align-items: center;
          -webkit-animation: 8.6s ease-in-out infinite levitate;
                  animation: 8.6s ease-in-out infinite levitate;
          border-radius: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        
        .ears {
          height: 10.5%;
          width: 46%;
          background-color: #dc1f29;
          border-radius: 1vmin;
          -webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
                  clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0);
          position: relative;
          top: 22%;
        }
        .ears::before {
          /* ears border */
          height: 100%;
          width: 100%;
          background-color: #7d000f;
          border-radius: inherit;
          -webkit-clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
                  clip-path: polygon(5% 0, 0 5%, 0 95%, 5% 100%, 95% 100%, .........完整代码请登录后点击上方下载按钮下载查看