如何利用css3
绘制一个会动的大嘴鸟(动画效果),下面web建站小编给大家介绍一下大嘴鸟动画代码!
html代码
<div class="dong"> <div class="monster"> <div class="monster__face"> <div class="monster__eye avatar-eye avatar-eye--green eye--left"> <div class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span> </div> </div> <div class="monster__eye avatar-eye avatar-eye--violet eye--right"> <div class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span> </div> </div> <div class="monster__noses"> <div class="monster__nose"></div> <div class="monster__nose"></div> </div> <div class="monster__mouth"> <div class="monster__top"></div> <div class="monster__bottom"></div> </div> </div> </div> </div>
css3代码
/* 大嘴鸟*/ .dong { z-index:9999; position:fixed; top:-40px; right:-80px; transform:scale(0.24); -webkit-transform:scale(0.24); -moz-transform:scale(0.24); } .monster { transform:rotate(-50deg); -ms-transform:rotate(-50deg); /* IE 9 */ -moz-transform:rotate(-50deg); /* Firefox */ -webkit-transform:rotate(-50deg); /* Safari 和 Chrome */ -o-transform:rotate(-50deg); /* Opera */ display:flex; justify-content:center; position:relative; width:170px; height:400px; border-top-left-radius:200px; border-top-right-radius:200px; background-color:#3C47D7; box-shadow:20px 20px 60px #4650E5; } .monster__face { display:flex; justify-content:center; align-items:center; flex-direction:column; position:absolute; top:14%; width:75%; height:160px; } .monster__noses { top:50%; display:flex; justify-content:space-between; width:28%; height:auto; margin-bottom:10px; } .monster__nose { width:8px; height:12px; border-radius:20px; background:rgba(0,0,0,0.5); box-shadow:4px 8px 5px rgba(0,0,0,0.1); } .monster__mouth { display:flex; justify-content:center; align-items:center; position:relative; width:100%; height:0%; overflow:hidden; border:25px solid #FFC333; border-radius:100px; background-color:#810332; animation:mouth 1.75s infinite; box-shadow:4px 8px 5px rgba(0,0,0,0.2); box-sizing:border-box; } .monster__mouth::before { content:''; position:absolute; width:150px; height:80px; border-radius:100px; background-color:#400018; } .monster__mouth::after { content:''; position:absolute; bottom:-80px; width:160px; height:80px; border-top-left-radius:50%; border-top-right-radius:50%; background-color:#DC1B50; animation:tongue 1.75s infinite; } .monster__top { position:absolute; top:-30px; width:170px; height:30px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; background-color:#ffffff; z-index:100; animation:t 1.75s infinite; } .monster__bottom { position:absolute; bottom:0; width:100px; height:30px; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#ffffff; z-index:100; animation:b 1.75s infinite; } .avatar-eye { position:absolute; top:-10%; width:65px; height:65px; background:linear-gradient(105deg,white,#cb87f4); border-radius:100%; box-shadow:4px 8px 5px rgba(0,0,0,0.2); margin:3px; -webkit-transform:translateX(-50%); transform:translateX(-50%); } .avatar-eye--green { background:linear-gradient(to bottom,#fdfdfd,#c3efea); } .avatar-eye--violet { background:linear-gradient(to bottom,#fdfdfd,#e6d6f6); } .eye--left { left:10%; } .eye--right { left:85%; } .eye--center { left:45%; top:10%; } .avatar-eye-pupil { position:absolute; width:55%; height:55%; left:50%; top:25%; -webkit-transform:translate(-50%); transform:translate(-50%); z-index:100; border-radius:100%; } .pupil--green { background:linear-gradient(135deg,rgba(188,248,177,0.7),#2fa38c 75%); } .pupil--pink { background:linear-gradient(135deg,#f1a183,#8535cd); } .avatar-eye-pupil-blackThing { position:absolute; width:55%; height:55%; left:50%; top:25%; background:#2c2f32; -webkit-transform:translate(-50%); transform:translate(-50%); border-radius:100%; box-shadow:0px 0px 10px rgba(0,0,0,0.2); } .avatar-eye-pupil-lightReflection { position:absolute; width:7px; height:7px; left:25%; top:10%; background:#ebebeb; -webkit-transform:translate(-50%); transform:translate(-50%); border-radius:100%; box-shadow:10px 10px 10px rgba(255,255,255,0.2); } /*大嘴动起来*/ @keyframes t { 0%,10%,80%,100% { top:-30px; } 20% { top:0px; } 30% { top:-20px; } 40% { top:-0px; } 50% { top:-25px; } 70% { top:0px; } } @keyframes b { 0%,10%,80%,100% { bottom:-30px; } 20% { bottom:0px; } 30% { bottom:-20px; } 40% { bottom:-0px; } 50% { bottom:-25px; } 70% { bottom:0px; } } @keyframes mouth { 0%,10%,100% { width:100%; height:0%; } 15% { width:90%; height:30%; } 20% { width:50%; height:70%; } 25% { width:70%; height:70%; } 30% { width:80%; height:60%; } 35% { width:60%; height:70%; } 40% { width:55%; height:75%; } 45% { width:50%; height:90%; } 50% { width:40%; height:70%; } 55% { width:70%; height:95%; } 60% { width:40%; height:50%; } 65% { width:100%; height:60%; } 70% { width:100%; height:70%; } 75% { width:90%; height:70%; } 80% { width:50%; height:70%; } 85% { width:90%; height:50%; } 85% { width:40%; height:70%; } 90% { width:90%; height:30%; } 95% { width:100%; height:10%; } } @keyframes tongue { 0%,20%,100% { bottom:-80px; } 30%,90% { bottom:-40px; } 40% { bottom:-45px; } 50% { bottom:-50px; } 70% { bottom:-80px; } 90% { bottom:-40px; } }
css3如何利用Flex实现响应式表格布局(Flex弹性布局)
上面是“css3绘制一个会动的大嘴鸟”的全面内容,想了解更多关于 好玩 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2812.html
workflows工作流
- ai图片扩大comfyui工作流
- 3d卡通风格多彩头发的女人
- 一盒用五颜六色的食材烹制的热气腾腾的寿司
- 骨骼般的恶魔修女ComfyUI工作流
- 一位宇航员做在一只乌龟上在星空中游走
- 一幅梦幻家园comfyui工作流
- 一个由红色玻璃制成的女性形状的破碎雕塑
- 一只巨大的极其精细的鞋子ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!