div+css实现公鸡行走动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现公鸡行走动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { padding: 0; margin: 0; box-sizing: border-box; } :root { --color-bg: #f0693e; --color-1: #f3c074; --color-2: #753d22; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--color-bg); overflow: hidden; } .rooster { position: relative; animation: body-ans 0.6s linear infinite; } .rooster__head { width: 3rem; height: 3rem; background-color: var(--color-2); margin-left: 1.5rem; --radius: 10rem; border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); } .rooster__head--wing { --h: 1.6rem; --w: calc(var(--h) * 2); position: absolute; top: calc(var(--h) * -0.9); left: 1rem; width: var(--w); height: var(--h); border-radius: 0 0 4rem 4rem; border-left: 0.8rem solid #c71e24; background-color: #d52026; animation: ans-wing-1 0.4s infinite; } @keyframes ans-wing-1 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } } .rooster__head--wing--2 { --h: 2.8rem; --w: calc(var(--h) / 2); position: absolute; top: calc(var(--h) * -1); left: 2.8rem; width: var(--w); height: var(--h); border-radius: 0 4rem 4rem 0; background-color: #a21f21; border-right: 4px solid #991c1e; transform-origin: bottom; transform: rotate(-10deg); animation: ans-wing-2 0.4s ease-in-out infinite; } @keyframes ans-wing-2 { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-20deg); } } .rooster__head--wing--3 { --h: 1.2rem; --w: calc(var(--h) * 2); position: absolute; top: -0.4rem; left: 2.6rem; width: var(--w); height: var(--h); border-radius: 0 0 4rem 4rem; background-color: #a21f21; border-right: 4px solid #991c1e; transform-origin: bottom; --rotate: 15deg; transform: rotate(var(--rotate)); animation: ans-wing-3 0.5s infinite; } .rooster__head--wing--4 { --h: 2.8rem; --w: calc(var(--h) / 2); position: absolute; top: calc(var(--h) * -0.9); left: 2.4rem; width: var(--w); height: var(--h); border-radius: 4rem 0 2rem 0; background-color: #d52026; border-right: 8px solid #c71e24; transform-origin: bottom; --rotate: 10deg; transform: rotate(var(--rotate)); animation: ans-wing-3 0.4s infinite; } @keyframes ans-wing-3 { 0%, 100% { transform: rotate(var(--rotate)); } 50% { transform: rotate(calc(var(--rotate) + 15deg)); } } .rooster__eyes { position: absolute; top: 0.3rem; left: 0.8rem; display: flex; align-items: center; } .rooster__eye { --s: 1.4rem; width: var(--s); height: var(--s); border-radius: 50%; background-color: #fff; position: relative; overflow: hidden; } .rooster__eye--1 { border: 4px solid var(--color-2); box-sizing: content-box; } .rooster__eye--2 { margin-left: -0.2rem; } .rooster__eye::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: #000; } .rooster__eye-ans { position: absolute; width: 100%; height: 100%; top: 0%; left: 0; background-color: #753d22; transform: translateY(-70%); z-index: 2; animation: eye-ans 1.2s infinite; } .rooster__eye-ans--d { position: absolute; width: 100%; height: 100%; top: 0%; left: 0; background-color: #753d22; border-radius: inherit; transform: translateY(100%); z-index: 2; animation: eye-ans-d 1.2s infinite; } @keyframes eye-ans { 0%, 85%, 100% { transform: translateY(-70%); } 95% { transform: translateY(-40%); } } @keyframes eye-ans-d { 0%, 85%, 100% { transform: translateY(100%); } 95% { transform: translateY(40%); } } .rooster__mouth { position: absolute; width: 1.4rem; height: 0.9rem; left: 1rem; top: 2rem; border-radius: 50%; background-color: yellow; transform: rotate(2deg); z-index: 100; } .rooster__mouth-d { position: absolute; top: 2.97rem; left: 1.55rem; width: 0.9rem; height: 0.9rem; background-color: #991c1e; border-radius: 50%; z-index: 2; transform-origin: top; animation: mouth-ans 0.5s ease-in-out infinite; } .rooster__mouth-d--shadow { top: 2.97rem; left: 1.66rem; transform: scale(1.1); background-color: #7e0404; } .rooster__mouth-d::after { content: ""; position: absolute; top: -0.1rem; left: 0.15rem; width: 0.4rem; height: 0.5rem; transform: rotate(35deg); background-color: #991c1e; } .rooster__mouth-d::before { content: ""; position: absolute; top: -0.1rem; left: 0.35rem; width: 0.4rem; height: 0.5rem; transform: rotate(-35deg); background-color: #991c1e; } .rooster__mouth-d--shadow::after, .rooster__mouth-d--shadow::before { background-color: #7e0404; } .rooster__mouth::after { content: ""; position: absolute; right: 0; top: 0; width: 0.5rem; height: 0.8rem; border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; border-right: 3px solid #fff; transform: rotate(-20deg); box-sizing: content-box; } .rooster__mouth::before { content: ""; position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; border-radius: 1rem 0 0 0; border-top: 8px solid yellow; transform: translate(-40%, -6%) rotate(10deg); } @keyframes mouth-ans { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } .rooster__neck { margin-top: -1rem; height: 8.7rem; width: 4.5rem; border-top-left-radius: 5rem; border-bottom-left-radius: 4rem; background-color: var(--color-2); position: relative; overflow: hidden; } .rooster__neck::after { content: ""; position: absolute; left: 0; top: 48%; width: 100%; height: 1.2rem; border-right: 4px solid #ddaf68; border-left: 4px solid #ffd89e; background-color: var(--color-1); z-index: 11; } .rooster__neck-s { position: absolute; top: 3.5rem; left: -0.5rem; display: flex; gap: 0.1rem; z-index: 10; } .rooster__neck--l { background-image: linear-gradient( to bottom left, transparent 20%, #ffd89e 30% ); } .rooster__neck--r { background-image: linear-gradient( to bottom left, #ddaf68 64%, transparent 64% ); } .rooster__neck--1 { width: 1rem; height: 1rem; background-color: #f3c074; border-left: 4px solid #4e2816; border-top: 4px solid #4e2816; transform: rotate(45deg); } .rooster__neck--curve { position: absolute; top: 0.5rem; left: 0rem; width: 3rem; height: 4rem; border-left: 0.8rem solid #a3572eb7; transform: rotate(30deg); border-radius: 50%; } .rooster__body { --radius: 5rem; margin-top: -3.4rem; width: 10rem; height: 5rem; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); background-color: var(--color-1); border: 4px solid #ffd89e; border-top: transparent; position: r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0