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%, 100% 95%, 100% 5%, 95% 0, 95% 4%, 98% 7%, 98% 93%, 95% 96%, 5% 96%, 2% 93%, 2% 7%, 5% 4%, 95% 4%);
        }
        
        .helmet {
          height: 35%;
          width: 42%;
          background-color: #f7ba37;
          border: 0.6vmin solid #7d000f;
          border-radius: 11vmin;
          box-shadow: inset 0 0.6vmin 0 0.6vmin #dc1f29, inset 1vmin 2vmin 0 0.6vmin #dc1f29, inset -1vmin 2vmin 0 0.6vmin #dc1f29;
          overflow: hidden;
          z-index: 0;
        }
        .helmet-outline {
          height: 100%;
          width: 100%;
          background-color: #dc1f29;
          -webkit-clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
                  clip-path: polygon(40% 100%, 34% 84%, 21% 77%, 10% 51%, 20% 25%, 36% 16%, 40% 33%, 60% 33%, 64% 16%, 80% 25%, 90% 52%, 79% 77%, 65% 84%, 60% 100%, 100% 100%, 100% 0, 0% 0%, 0 100%);
          position: absolute;
          top: 0;
          z-index: 1;
        }
        .helmet-outline::after {
          /** border **/
          height: 100%;
          width: 100%;
          background-color: #7d000f;
        .........完整代码请登录后点击上方下载按钮下载查看