纯css实现坤坤经典动作-“铁山靠”
背景
2023年2月16日,晴,今天没有工作,一直在掘金摸鱼,摸的我好累。
不行!我得找点有意义的事情做!
此时间,我发的一条沸点竟然有小黑子
给我评论,\
我看到之后气不打一处来,哥哥这么努力,还有这么多人黑我家哥哥,
so!!! 我打算为哥哥正名!
作为工作时间一坤年的ikun,我要尽我的绵薄之力还原哥哥的舞姿!
让你们臣服!
开搞
1. 构思
- 选择题材阶段,我毫不犹豫决定实现坤坤的经典
“铁山靠”
动作;
- 然后就是思考怎么实现了,定几个要实现的关键要素;
- 实现帅气中分发型;
- 实现身着背带裤的潇洒身型;
- 实现铁山靠动作;
- 优化细节。
代码就不往文章里贴了,最后直接在码上掘金在线看吧-.-
2. 绘制帅气的中分发型
- 先画个头,设置弧度
border-radius:50%
画个圆将就一下; - 所有头发颜色,裤子颜色,皮肤颜色,都是用浏览器自带的
取色器
从坤坤的图片上吸的颜色;
- 中分发型分为两瓣儿,用两个div设置
border-radius
实现,border-dadius可以设置八个位置的弧度。写法如:
border-radius: 65px 21px 76px 14px / 90px 17px 111px 26px;
//分别设置的是 左上 右上 右下 左下 / 左上 右上 右下 左下 的弧度
- 颜色设置个灰色渐变色
background-image: linear-gradient(to right, lightgrey, grey);
3. 绘制背带裤造型
- 先画个长方形div当身体,背景色设置为黑色,背带我懒得画了,直接写个大写Y代替背带了(没想到效果还不错);
- 然后绘制胳膊和腿,由于考虑身体是主体,所以头,四肢都相对于身体定位;
- 把所有元素都塞身体里,给个id为
“kun”
,因为坤坤是唯一的!所以要用id选择器! - 利用
position: absolute
设置胳膊腿的位置,然后用transform: rotate()
对四肢进行选择调节姿势,在这之前要用transform-origin: center top;
设置好四肢的旋转基点。 - 胳膊的大小胳膊大胳膊用div,小胳膊用这个div的
:after
伪元素实现
<div id="kun"><div class="arms"><div class="arm arm-l"></div><div class="arm arm-r"></div></div><div class="leg leg-l"></div><div class="leg leg-r"></div>
</div>
.arm{background-color: #333;position: absolute;top: 10px;z-index: 1;transform-origin: center top;width: 30px;height: var(--armLength);&-l{left: 0;transform: rotate(50deg);border-radius: 0 0 30px 30px;&::after{content: '';position: absolute;width: 26px;height: 80px;border-radius: 0 0 30px 30px;background-color: #333;left: 0;bottom: -70px;transform-origin: center top;transform: rotate(-100deg);}}&-r ...
}
4. 实现铁山靠动作
- 精心打磨铁山靠的动作要领,采集每一帧的动画定格
- 由于每次变化都是不规则多边形,我考虑了三种实现方式
transform: skew() rotate()
- 用
border
实现 - 用
clip-path
实现 - 最后考虑方便调试,以及可以实现更自由的图形,选择了用
clip-path
实现 - 由于身体用clip-path实现动画过程,占用的位置不会变化,所以胳膊也不会跟着身体
摆动
,所以我得单独处理胳膊的动画,通过设置间距和位置体现跟着身体晃动的效果。
//头动画
@keyframes headmove {25% {bottom: 210px;}50% {bottom: 195px;}75% {bottom: 170px;}
}
// 胳膊动画
@keyframes armmove {25% {width: 92%;top: 60px;left: 11%;}50% {width: 72%;top: 66px;left: 12%;}75% {width: 81%;top: 80px;left: 14%;}
}//身体动画
@keyframes bodymove {25% {-webkit-clip-path: polygon(23% 13%, 100% 0%, 75% 100%, 0% 100%);clip-path: polygon(23% 13%, 100% 0%, 75% 100%, 0% 100%);}50% {-webkit-clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);}75% {-webkit-clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);}
}
5. 细节调整
- 粗略的实现后,四肢的位置显然狠尴尬。
- 打开控制台,选中身体,用
animation-play-state: paused;
将身体分别暂停在不同的关键帧位置,然后慢慢微调四肢位置 - 设置背景
大功告成!!
6. 成果展示
jcode
免责声明!
我是真的ikun
背歌为证
迎面走来的你让我如此蠢蠢欲动*
这种感觉我从未有
Cause I got a crush on you who you
你是我的我是你的谁
再多一眼看一眼就会爆炸
再近一点靠近点快被融化
本文代码仅供娱乐,不存在任何歧视,不存在任何造谣污蔑。如果冒犯,请私信我,我会苏珊!
纯css实现坤坤经典动作-“铁山靠”相关推荐
- 轻量纯css框架,27款经典的CSS框架小结 网页制作必备
下面给你推荐了27款优秀的CSS框架,你可以选用. 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 芒 ...
- 纯CSS绘图:我的经典制作-小桥流水人家
纯CSS绘图:我的经典制作-小桥流水人家 爱情小熊 更新博客了,很开心,因为有个她,下面的内容及其让单身狗不适应,请注意前方高能,谨慎前行!在用纯CSS绘制下面这些图的时候,有一些小故事.用纯的CSS ...
- 纯CSS实现密室逃脱游戏
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 @alphardex,一个兴趣使然的前端,号称"CSS魔法使",重度中二病患者,喜欢独自研究CSS的奥秘,口头禅是&q ...
- css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...
- 纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计 标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
- css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画 由于发现了css的这个现象 当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动 所以我忽然想到,实现人的走路动画并不是不可能的了 ...
- 纯CSS实现枫叶下落
纯CSS实现枫叶下落 教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载 效果图 代码区 以下代码为本人填写,转载请注明教程地址和本贴地址 ...
- php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果,我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果 我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
- 纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
最新文章
- Shell教程(三):数组/Arrays、基本运算符
- java web 耗时请求_javaweb应用中出现了一个耗时异常长的数据查询,寻求帮助
- java面向对象之封装,java面向对象之封装-Go语言中文社区
- 铜陵信息化建设和智慧城市发展成果惠及百姓
- Javascript闭包概念剖析
- java ReentrantLock 使用
- 不显示表头_技术干货 | 基于数模混合型SoC实现的两线制高精度无源表头方案
- Apache会比路虎的应急效果更好
- (35)FPGA面试技能提升篇(AD、DA、时钟芯片)
- python中argsort_浅述python中argsort()函数的实例用法
- Android添加开机完成后脚本(boot_completed)
- 前端在linux中常用的命令,前端在SSH上常用的Linux命令
- Javascript (history,location)对象
- bootchart.jar 编译过程
- SQL Server 2014,表变量上的非聚集索引
- GoF、J2EE 设计模式
- ts无损剪辑合并_视频如何合并?视频合并太难?其实很简单
- 洛谷试炼场---普及练习场
- TPM分析笔记(二)TPM2.0 规范文档
- php 实现 pacs 系统,知名PACS系统VC源码
热门文章
- 人民日报探店联想安定门店,联想智慧零售变革现成效
- 2018 大厂高级前端面试题汇总
- 实现SSR服务端渲染
- 《MongoDB入门教程》第03篇 MongoDB基本概念
- 佛罗伦萨小镇与雅诗阁中国达成战略合作;日立电梯25年来为中国市场提供93万台电梯 | 美通企业日报...
- 计算机毕业设计-ssm智能小区管理系统(源码+数据库+文档)社区维修管理系统-小区缴费管理系统javaweb项目
- 微信小程序(30):自定义组件-slot
- 在线播放bt php,yunBT:一个基于TP3.1的多用户BT离线下载程序,支持在线播放
- 孕妇吃米饭好吗?盘点适合孕妇吃的美食
- Picasso源码初步分析