小黄人图片

黄人动画是一个非常有趣的CSS动画,可以通过CSS3中的一些特性来实现。以下是一个基本的小黄人动画的CSS代码: ```css /* 设置小黄人动画的容器 */ .minion { position: relative; width: 250px; height: 250px; } /* 设置小黄人的身体 */ .minion .body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background-color: yellow; } /* 设置小黄人的眼睛 */ .minion .eye { position: absolute; top: 30%; left: 25%; width: 20px; height: 20px; border-radius: 50%; background-color: white; } /* 设置小黄人眼睛里的黑色部分 */ .minion .eye::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: black; } /* 设置小黄人眼睛的另一只 */ .minion .eye.right { left: auto; right: 25%; } /* 设置小黄人的嘴巴 */ .minion .mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 20px; border-radius: 0px 0px 20px 20px; border-bottom: solid black 3px; } /* 设置小黄人的带子 */ .minion .goggles { position:absolute; top:-10px; left:-10px; width:120px; height:120px; border-radius:50%; border:10px solid #2D2D2D; background-color:white; } /* 设置小黄人的带子上面的金属部分 */ .minion .goggles::before { content:""; display:block; position:absolute; top:-8px; left:-8px; width:10px; height:10px; border-radius:50%; background-color:#B8B8B8; } /* 设置小黄人的带子下面的金属部分 */ .minion .goggles::after { content:""; display:block; position:absolute; bottom:-8px; right:-8px; width:10px; height:10px; border-radius:50%; background-color:#B8B8B8 } /* 定义小黄人动画的关键帧 */ @keyframes rotate { from { transform : rotate(0deg); } to { transform : rotate(360deg); } } /* 设置小黄人动画 */ .minion:hover .goggles, .minion:hover .eye::before { animation-name: rotate; /* 使用刚才定义的关键帧 */ animation-duration:2s; /* 持续时间为2秒 */ animation-timing-function: linear; /* 时间函数为线性 */ animation-iteration-count: infinite; /* 循环无限次 */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值