css+svg实现带生日歌男孩给女孩过生日动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现带生日歌男孩给女孩过生日动画效果代码
代码标签: css svg 生日歌 男孩 给 女孩 过 生日
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; .swing, html .container .boy.dance, body .container .boy.dance, html .container .girl.dance, body .container .girl.dance { animation: 1.5s float ease-in-out alternate infinite; } html, body { padding: 0px; margin: 0px; box-sizing: border-box; over-flow: hidden; } html .container, body .container { background-color: #FF8C94; height: 100vh; width: 100%; display: flex; justify-content: center; box-sizing: border-box; } html .container .cake, body .container .cake { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; top: -5px; left: -135px; z-index: 101; } html .container .cake .candle, body .container .cake .candle { position: relative; height: 20px; width: 5px; background-color: #fff; border-radius: 4px; z-index: 10; } html .container .cake #flame, body .container .cake #flame { position: absolute; z-index: 10; } html .container .cake .lit, body .container .cake .lit { background-color: #ffc950; width: 5px; height: 12px; filter: blur(1px); border-top-left-radius: 10px 35px; border-top-right-radius: 10px 35px; border-bottom-right-radius: 10px 10px; border-bottom-left-radius: 10px 10px; top: -15px; margin: auto; box-shadow: 0 0 17px 7px rgba(244, 231, 112, 0.71); transform-origin: bottom; animation: flicker 1s ease-in-out alternate infinite; } html .container .cake .off, body .container .cake .off { display: none; } html .container .cake #layer1, body .container .cake #layer1 { width: 50px; height: 20px; background-color: #715447; } html .container .cake #layer2, body .container .cake #layer2 { height: 10px; width: 100px; background-color: #ddd; } html .container .girl, body .container .girl { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; top: 15px; left: 0px; } html .container .girl .hair, body .container .girl .hair { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; background-color: #424b54; border-top-left-radius: 120% 200%; border-top-right-radius: 120% 200%; z-index: 2; position: relative; top: 25px; } html .container .girl .face, body .container .girl .face { background-color: #fed9a5; width: 40px; height: 60px; border-radius: 100%; position: relative; top: -35px; z-index: 3; } html .container .girl .eye-brows, body .container .girl .eye-brows { position: relative; top: -80px; z-index: 100; display: flex; justify-content: space-around; width: 30px; } html .container .girl .eye-brows .brow, body .container .girl .eye-brows .brow { width: 8px; height: 2px; background-color: #000; } html .container .girl .eye-brows #left-brow, body .container .girl .eye-brows #left-brow { border-top-left-radius: 100%; } html .container .girl .eye-brows #right-brow, body .container .girl .eye-brows #right-brow { border-top-right-radius: 100%; } html .container .girl .ears, body .container .girl .ears { display: flex; justify-content: space-between; flex-direction: row; z-index: 10; height: 2px; position: relative; top: -20px; } html .container .girl .ears .ear.left, body .container .girl .ears .ear.left { width: 10px; height: 15px; background-color: #fed9a5; position: relative; left: -17px; top: 7px; border-radius: 100%; } html .container .girl .ears .ear.left .ring, body .container .girl .ears .ear.left .ring { width: 5px; height: 5px; background-color: #fff; position: relative; top: 11px; left: 2px; border-radius: 100%; } html .container .girl .ears .ear.right, body .container .girl .ears .ear.right { width: 10px; height: 15px; background-color: red; background-color: #fed9a5; position: relative; left: 17px; top: 7px; z-index: -1; border-radius: 100%; } html .container .girl .ears .ear.right .ring, body .container .girl .ears .ear.right .ring { width: 5px; height: 5px; background-color: #fff; position: relative; top: 11px; left: 3px; border-radius: 100%; } html .container .girl .eyes, body .container .girl .eyes { display: flex; justify-content: space-around; width: 30px; position: relative; top: -35px; } html .container .girl .eyes .eye, body .container .girl .eyes .eye { width: 6px; height: 6px; top: -43px; border-radius: 100%; background-color: #fff; z-index: 999; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } html .container .girl .eyes .eye .eye-ball, body .container .girl .eyes .eye .eye-ball { width: 3px; height: 3px; border-radius: 100%; background-color: #000; } html .container .girl .mouth, body .container .girl .mouth { width: 15px; height: 7px; background-color: #D51462; z-index: 100; position: relative; top: -65px; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; display: flex; justify-content: center; align-items: center; } html .container .girl .mouth .teeth, body .container .girl .mouth .teeth { height: 5px; min-width: 13px; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background-color: #fff; visibility: hidden; position: relative; left: 8px; border: 2px solid #D51462; z-index: 1; } html .container .girl .mouth .blow, body .container .girl .mouth .blow { height: 8px; background-color: #424b54; position: relative; left: -8px; min-width: 10px; border-radius: 100%; border: 3px solid #D51462; visibility: hidden; } html .container .girl .neck, body .container .girl .neck { background-color: #fed9a5; width: 15px; height: 25px; z-index: 3; position: relative; top: -55px; border-bottom-left-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .girl .body, body .container .girl .body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html .container .girl .body .shirt, body .container .girl .body .shirt { width: 90px; height: 110px; background-color: #D51462; position: relative; top: -85px; border-top-left-radius: 120% 100%; border-top-right-radius: 120% 100%; display: flex; justify-content: space-between; } html .container .girl .body .hands, body .container .girl .body .hands { display: flex; position: relative; top: -20px; z-index: 101; } html .container .girl .body .hands .palm, body .container .girl .body .hands .palm { width: 20px; height: 20px; background-color: #fed9a5; border-radius: 100%; } html .container .girl .body .hands #left_hand, body .container .girl .body .hands #left_hand { position: relative; width: 100px; height: 20px; background-color: #8F0D42; top: 0px; left: 0px; transform: rotate(67deg); border-top-left-radius: 120% 100%; border-bottom-left-radius: 120% 100%; } html .container .girl .body .hands #left_hand #left_palm, body .container .girl .body .hands #left_hand #left_palm { position: relative; left: 95px; } html .container .girl .body .hands #right_hand, body .container .girl .body .hands #right_hand { position: relative; width: 100px; height: 20px; background-color: #8F0D42; left: 0px; top: 0px; transform: rotate(-67deg); z-index: 100; border-top-right-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .girl .body .hands #right_hand #right_palm, body .container .girl .body .hands #right_hand #right_palm { position: relative; left: -15px; } html .container .girl .body .jeans, body .container .girl .body .jeans { width: 70px; height: 30px; background-color: #fff; z-index: 100; position: relative; top: -85px; display: flex; justify-content: space-between; } html .container .girl .body .jeans .legs, body .container .girl .body .jeans .legs { width: 40px; height: 90px; background-color: #ddd; position: relative; top: 30px; border-bottom-left-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .girl .body .jeans #gap, body .container .girl .body .jeans #gap { height: 5px; width: 10px; border-bottom-left-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .girl .body .foot, body .container .girl .body .foot { display: flex; justify-content: space-between; width: 70px; position: relative; top: -5px; } html .container .girl .body .foot .shoes, body .container .girl .body .foot .shoes { width: 30px; height: 40px; background-color: #D51462; position: relative; z-index: 300; border-bottom-left-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .boy, body .container .boy { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; left: -15px; top: -600px; -webkit-transition: top 2s ease; /* Safari */ transition: top 2s ease; /*End of body*/ } html .container .boy .head, body .container .boy .head { height: 80px; width: 60px; position: relative; top: 5px; display: flex; justify-content: center; align-items: center; flex-direction: column; } html .container .boy .head .hair, body .container .boy .head .hair { width: 40px; height: 55px; position: absolute; background-color: #424b54; border-top-left-radius: 150% 70%; border-top-right-radius: 150% 70%; border-bottom-left-radius: 150% 170%; border-bottom-right-radius: 150% 170%; z-index: 2; } html .container .boy .head .fringe, body .container .boy .head .fringe { width: 40px; height: 20px; z-index: 99; position: relative; top: 4px; border-radius: 100% 0 100% 100%; background-color: #424b54; } html .container .boy .head .face, body .container .boy .head .face { background-color: #fed9a5; width: 55%; height: 50px; border-radius: 100%; position: relative; top: -7px; z-index: 3; display: flex; } html .container .boy .head .eye-brows, body .container .boy .head .eye-brows { position: relative; top: -43px; z-index: 100; display: flex; justify-content: space-around; width: 30px; } html .container .boy .head .eye-brows .brow, body .container .boy .head .eye-brows .brow { width: 8px; height: 2px; background-color: #000; } html .container .boy .head .eye-brows #left-brow, body .container .boy .head .eye-brows #left-brow { border-top-left-radius: 100%; } html .container .boy .head .eye-brows #right-brow, body .container .boy .head .eye-brows #right-brow { border-top-right-radius: 100%; } html .container .boy .head .eyes, body .container .boy .head .eyes { display: flex; justify-content: space-around; width: 30px; } html .container .boy .head .eyes .eye, body .container .boy .head .eyes .eye { width: 6px; height: 6px; top: -40px; border-radius: 100%; background-color: #fff; z-index: 999; position: relative; display: flex; justify-content: space-between; align-items: center; } html .container .boy .head .eyes .eye .eye-ball, body .container .boy .head .eyes .eye .eye-ball { width: 3px; height: 3px; display: flex; justify-content: center; align-items: center; border-radius: 100%; background-color: #000; } html .container .boy .head .ears, body .container .boy .head .ears { display: flex; justify-content: space-between; flex-direction: row; z-index: 10; height: 2px; } html .container .boy .head .ears .ear.left, body .container .boy .head .ears .ear.left { width: 10px; height: 15px; background-color: #fed9a5; position: relative; left: -9px; top: 7px; border-radius: 100%; } html .container .boy .head .ears .ear.right, body .container .boy .head .ears .ear.right { width: 10px; height: 15px; background-color: red; background-color: #fed9a5; position: relative; left: 9px; top: 7px; z-index: -1; border-radius: 100%; } html .container .boy .head .mouth, body .container .boy .head .mouth { width: 15px; height: 7px; position: relative; background-color: #fff; z-index: 150; top: -30px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } html .container .boy .neck, body .container .boy .neck { background-color: #fed9a5; width: 15px; height: 35px; z-index: 3; position: relative; top: -20px; border-bottom-left-radius: 120% 100%; border-bottom-right-radius: 120% 100%; } html .container .boy .body, body .container .boy .body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html .container .boy .body .shirt, body .container .boy .body .shirt { width: 90px; height: 120px; background-color: #40BEB0; position: relative; top: -40px; border-top-left-radius: 120% 100%; border-top-right-radius: 120% 100%; display: flex; justify-content: space-between; } html .container .boy .body .shirt .sleeves, body .container .boy .body .shirt .sleeves { width: 20px; height: 120px; background-color: #2E8A80; z-index: 110; } html .container .boy .body .shirt .hand, body .container .boy .body .shirt .hand { background-color: #fed9a5; z-index: 103; } html .container .boy .body .shirt #left-hand, body .container .boy .body .shirt #left-hand { position: absolute; width: 60px; height: 25px; left: -45px; top: 55px; transform: rotate(-67deg); } html .container .boy .body .shirt #left-fore-hand, body .container .boy .body .shirt #left-fore-hand { position: absolute; width: 45px; height: 25px; left: -60px; top: 75px; border-bottom-left-radius: 50%; } html .container .boy .body .shirt #left-palm, body .container .boy .body .shirt #left-palm { position: absolute; height: 18px; width: 36px; border-bottom-left-radius: 36px; border-bottom-right-radius: 36px; top: 76px; left: -95px; background-color: #EBC898; } html .container .boy .body .shirt #left-sleeve, body .container .boy .body .shirt #left-sleeve { position: absolute; left: -30px; top: 20px; width: 60px; height: 30px; border-top-right-radius: 80%; border-bottom-right-radius: 40%; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0