摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。这次用到了一些的特性,通过设置一些指定的参数来生成不同种类不同身材的小黄人。
仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。那就没意思了。
有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。
这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类、不同身材的小黄人。
GitHub传送门:https://github.com/lancer07/css3Minons
效果是这个样子的
首先 先做个标准版的(ps:也就是图中的第一个小黄人)HTML结构如下:(ps:每个小黄人的html结构都是一样的)
LESS代码如下:(ps:先定义一个小黄人的类,然后通过设置参数来实例化每个小黄人)
定义小黄人类
.Minion(@width:1;@height:1;@eye:2){ width: 380px * @width; height:700px * @height; position:absolute; margin-top: -100px; margin-left:-20px; transform : scale(0.5,0.5); .hairs{ position:absolute; top: -40px; z-index: 3; width: 100%; .hair{ background:#000; width:2px; height:70px; position:absolute } .hair1{ .hair; left:45%; transform:rotate(-20deg); } .hair2{ .hair; left:50%; } .hair3{ .hair; left:55%; transform:rotate(20deg); } } .body{ overflow: hidden; background: #fff500; width: 380px * @width; position:absolute; z-index: 1; height:700px * @height; border-radius: 180px * @width; } .glasses-type{ //眼镜 height:52px; background:#1f1a17; width:100%; position: absolute; top: 200px; z-index: 1; } .glasses{ z-index: 2; position:absolute; background:#dededd; border:2px solid #1f1a17; width:150px; height:150px; border-radius: 50%; top: 140px; &.left-glasses when (@eye = 2){ left:8%; .ball{ //left : 45%; animation: eye 1.5s infinite ease; } } &.right-glasses when (@eye = 2){ right:8%; .ball{ //right:45%; animation: eye 1.5s infinite ease; } } &.left-glasses when (@eye = 1){ left:50%; margin-left: -90px; width: 180px; height: 180px; .eye{ width: 150px; height: 150px; .ball{ animation: eye 1.5s infinite ease; } } } &.right-glasses when (@eye = 1){ display: none; } .eye{ background:#fff; width:120px; height:120px; border-radius: 50%; border:2px solid #1f1a17; margin:15px auto; position:relative; .ball{ background:#8f5444; width:40px; height:40px; border-radius: 50%; border:2px solid #1f1a17; position:absolute; top: 40%; transition: all .15s linear; strong{ display: block; width:20px; height:20px; background:#1f1a17; border-radius: 50%; position:absolute; top: 10px; left:10px; } } } } .mouth{ width:40%; height:80px; background:#fff; position:absolute; bottom:42%; left:30%; z-index: 1; border-radius: 120px 120px 40px 40px; border:2px solid #1f1a17; overflow:hidden; animation: up-down 0.5s infinite ease; .tooths{ .tooth{ border-right:2px solid #1f1a17; height:100%; width:0; position:absolute; } .tooth1{ .tooth; left:25%; } .tooth2{ .tooth; left:50%; } .tooth3{ .tooth; left:75%; } .line{ width:100%; top: 48%; border-top:3px solid #1f1a17; position:absolute; } } } .arm{ position:absolute; width:50px; height:400px; background:#fff500; border-radius: 50px; top: 190px; z-index: 0; &.left-arm{ left:-20px; transform:rotate(20deg); } &.right-arm{ right:-20px; transform:rotate(-20deg); } .hand{ position:absolute; bottom:0; width:60px; height:60px; border-radius: 50%; background:#1f1a17; left:-5px; } } .cloth{ background:#667ab3; border-radius: 20px; bottom:20px; width:80%; height:250px; position:absolute; z-index: 1; left:10%; } .pocket{ border:2px solid #1f1a17; border-radius: 5px 5px 30px 30px; width:100px; left:50%; margin-left: -50px; height:100px; position:absolute; z-index: 2; bottom: 80px; >div{ background:#1f1a17; width:50px; height:50px; border-radius: 50%; top: 20px; left:25px; position:absolute; >div{ width:20px; height:20px; border:5px solid #667ab3; transform:rotate(45deg); position:absolute; top: 10px; left:10px } } } .trousers{ background:#667ab3; border-radius: 10px 10px 130px 130px; bottom:0; width:100%; height:160px; position:absolute; z-index: 1; } .straps{ width:40px; height:150px; position:absolute; z-index: 1; background:#667ab3; bottom:230px; &.left-straps{ left:10px; transform:rotate(-40deg); } &.right-straps{ right:10px; transform:rotate(40deg); } .fastener{ background:#1f1a17; width:20px; height:20px; border-radius: 50%; bottom:10px; position:absolute; left:10px; } } .leg{ background:#667ab3; width:70px; height:120px; position:absolute; bottom:-80px; &.left-leg{ left:20%; .footer{ right:-2px; border-radius: 100px 0 0 20px; } } &.right-leg{ right:20%; .footer{ left:-2px; border-radius: 0 100px 20px 0; } } .footer{ background:#1f1a17; width:100px; height:50px; position:absolute; bottom:0; } } }
实例化
.minion-1{ z-index: 1; top: 50px; left: 0; .Minion(1,1,2); } .minion-2{ z-index: 2; top: 0; left: 24%; .Minion(0.88,1.1,1); } .minion-3{ z-index: 2; top: 44px; left: 42%; .Minion(1.15,1.02,1); } .minion-4{ z-index: 1; top: 5px; left: 67%; .Minion(1,1.1,2); }最后加点料
附加了2个小动画效果,眼睛转动和牙齿抖动。
@keyframes eye { 0% { transform:rotate(0,0); } 50% { transform:translate(70px,0px) } 100% { transform:translate(0px,0px) } } @keyframes up-down { 0% { transform:rotate(0,0); } 50% { transform:translate(0,2px) } 100% { transform:translate(0,0) } }后续
没有特别详细的描述每个细节部分,大家看一下源码或者fork一下就能知道具体每个元素是怎么实现的了。
当然这个肯定是有bug的,比如参数设置的过大或者过小,都会导致生成出来的小黄人乱七八糟,也欢迎大家吐槽。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54322.html
摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。这次用到了一些的特性,通过设置一些指定的参数来生成不同种类不同身材的小黄人。 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。那就没意思了。 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理...
摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。 这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门:https://github.com/lancer07/css3_fan 效...
摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。 这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门:https://github.com/lancer07/css3_fan 效...
阅读 1364·2019-08-29 17:14
阅读 1623·2019-08-29 12:12
阅读 710·2019-08-29 11:33
阅读 3248·2019-08-28 18:27
阅读 1423·2019-08-26 10:19
阅读 883·2019-08-23 18:18
阅读 3460·2019-08-23 16:15
阅读 2520·2019-08-23 14:14