css绘制四个猫咪效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制四个猫咪效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #a4c7ca; } .container { position: absolute; width: 600px; height: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* background */ .window { position: absolute; height: 350px; width: 500px; border: 20px solid whitesmoke; border-radius: 3px; z-index: -10; box-shadow: 5px 5px 5px grey; background: rgb(167, 225, 247); overflow: hidden; left: 50%; top: 50%; transform: translate(-50%, -50%); } .sun { position: absolute; height: 80px; width: 80px; border-radius: 50%; background-image: radial-gradient(gold, #f8e88d); box-shadow: 0px 20px 80px #fcdf05; z-index: 30; top: 18px; left: 25px; } .cloud { position: absolute; margin-top: 70px; width: 150px; height: 50px; background-color: white; border-radius: 100px; left: -180px; animation: cloud 60s linear; } .cloud::after, .cloud::before { content: ""; position: relative; display: inline-block; background: inherit; border-radius: inherit; } .cloud::after { width: 80px; height: 80px; top: -140px; left: 20px; } .cloud::before { width: 100px; height: 100px; top: -40px; left: 40px; } .grass { position: absolute; height: 100px; width: 650px; background-color: #80a071; bottom: 0px; } .catscontainer { display: flex; position: absolute; right: 40px; bottom: 190px; grid-gap: 20px; } .table { position: absolute; height: 30px; width: 620px; right: -58px; bottom: -160px; border-radius: 40px; background-image: linear-gradient(180deg, #956842 10%, #61421c); box-shadow: 0px 10px 60px rgb(52, 47, 47); } /* bubble */ .bubble { position: absolute; background: #fcd999; color: #050505; font-family: Parisienne; font-size: 30px; line-height: 60px; box-shadow: 3px 2px 8px 0px #363636b5; text-align: center; width: 130px; height: 59px; border-radius: 10px; padding: 0px; top: -120px; } .bubble:after { content: ""; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-width: 33px 43px 0 0; border-color: #fcd999 transparent transparent transparent; bottom: -33px; left: 24%; margin-left: -21.5px; } /* All cats */ .face { height: 80px; width: 110px; position: relative; border-radius: 60px; } .ears { width: 0; height: 0; position: relative; border-left: 8px solid transparent; border-right: 8px solid transparent; z-index: -1; } .inner1 { width: 0; height: 0; border-bottom: 50px solid #424242; border-left: 20px solid transparent; right: 20px; position: relative; } .inner2 { width: 0; height: 0; border-bottom: 50px solid #424242; border-right: 20px solid transparent; position: relative; } .eyes { position: absolute; width: 25px; height: 20px; border-radius: 50%; border: 1px solid black; background-color: white; } .eye1 { left: 18px; top: 20px; } .eye2 { left: 60px; top: 20px; } .eyeballs { position: absolute; height: 15px; width: 5px; border-radius: 50%; background-color: black; left: 9px; top: 4px; animation: rolleyes 10s linear 6s; } .nose { position: absolute; width: 0; height: 0; border-top: 13px solid #1f1a1e; border-left: 7px solid transparent; border-right: 7px solid transparent; z-index: 5; top: 45px; left: 46px; } .whiskers { width: 60px; height: 1px; background: black; position: absolute; } .whisker1 { transform: rotate(-20deg); top: -14px; } .whisker2 { transform: rotate(-10deg); top: -10px; } .whisker3 { transform: rotate(0deg); top: -4px; } .whisker4 { transform: rotate(20deg); top: -14px; left: -60px; } .whisker5 { transform: rotate(10deg); top: -10px; left: -60px; } .whisker6 { transform: rotate(0deg); top: -4px; left: -60px; } .mouth { position: absolute; left: -5px; top: 1px; height: 10px; width: 10px; border-radius: 50%; background-color: black; opacity: 0; } .catbody { position: relative; bottom: 28px; left: 10px; width: 86px; height: 140px; /* -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px; */ border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; z-index: -1; box-shadow: 6px 3px 20px rgb(97, 94, 94); } .tail { height: 80px; width: 130px; position: absolute; border-radius: 50%; z-index: -5; bottom: -100px; left: -50px; transform: rotate(60deg); } /* All of cat1 */ .cat1face { background-image: radial-gradient(#fef389, #cfc038); } .cat1body { background-image: radial-gradient(#fef389, #cfc038); } .cat1ear1 { bottom: 30px; transform: rotate(-30deg); border-bottom: 50px solid #fef389; } .cat1ear2 { bottom: 80px; left: 100px; transform: rotate(38deg); border-bottom: 50px solid #fef389; } .cat1tail { box-shadow: inset 8px -12px 0 0 #fef389; } /* All of cat2 */ .cat2face { background-image: radial-gradient(#eebad5, #c06e98); } .cat2body { background-image: radial-gradient(#eebad5, #c06e98); } .cat2ear1 { bottom: 30px; transform: rotate(-30deg); border-bottom: 50px solid #eebad5; } .cat2ear2 { bottom: 80px; left: 100px; transform: rotate(38deg); border-bottom: 50px solid #eebad5; } .cat2tail { box-shadow: inset 8px -12px 0 0 #eebad5; } /* All of cat3 */ .cat3face { background-image: radial-gradient(#a7e0c6, #6cc49c); } .cat3body { background-image: radial-gradient(#a7e0c6, #6cc49c); } .cat3ear1 { bottom: 30px; transform: rotate(-30deg); border-bottom: 50px solid #a7e0c6; } .cat3ear2 { bottom: 80px; left: 100px; transform: rotate(38deg); border-bottom: 50px solid #a7e0c6; } .cat3tail { box-shadow: inset 8px -12px 0 0 #a7e0c6; } /* All of cat4 */ .cat4face { background-image: radial-gradient(#6ab5f3, #5a8fbb); } .cat4eyeball { position: absolute; height: 15px; width: 5px; border-radius: 50%; background-color: black; left: 10px; top: 4px; animation: cat4rolleyes 10s linear; } .cat4body { background-image: radial-gradient(#6ab5f3, #5a8fbb); } .cat4ear1 { bottom: 30px; transform: rotate(-30deg); border-bottom: 50px solid #6ab5f3; } .cat4ear2 { bottom: 80px; left: 100px; transform: rotate(38deg); border-bottom: 50px solid #6ab5f3; } .cat4tail { box-shadow: inset 8px -12px 0 0 #6ab5f3; } /* animations bubble*/ .cat1bubble { opacity: 0; animation: cat1meow 3s linear; } .cat2bubble { opacity: 0; animation: cat2meow 3s linear; } .cat3bubble { opacity: 0; animation: cat3meow 3s linear; } .cat4bubble { opacity: 0; animation: cat4meow 3s linear 10s; } @keyframes cat1meow { 2% { opacity: 1; } 33% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 0; } } @keyframes cat2meow { 0% { opacity: 0; } 35% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } } @keyframes cat3meow { 0% { opacity: 0; } 33% { opacity:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0