网站建设报价 福州,蓬安网站建设,seo网站基础建设,网站建设后期需要后期做的背景
2023年2月16日#xff0c;晴#xff0c;今天没有工作#xff0c;一直在掘金摸鱼#xff0c;摸的我好累。 不行#xff01;我得找点有意义的事情做#xff01; 此时间#xff0c;我发的一条沸点竟然有小黑子给我评论#xff0c;\ 我看到之后气不打一处来#xff…背景
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 idkundiv classarmsdiv classarm arm-l/divdiv classarm arm-r/div/divdiv classleg leg-l/divdiv classleg 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 你是我的我是你的谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化
本文代码仅供娱乐不存在任何歧视不存在任何造谣污蔑。如果冒犯请私信我我会苏珊
