快看,他纯用css绘制出了嫦娥手捧的月兔,关键还能飞,牛
Posted bug菌¹
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快看,他纯用css绘制出了嫦娥手捧的月兔,关键还能飞,牛相关的知识,希望对你有一定的参考价值。
👨🎓作者:bug菌
🎉简介:CSDN、 掘金等社区优质创作者,全网合计7w粉+,对一切技术都感兴趣,重心偏Java方向,目前运营公众号「 猿圈奇妙屋」,欢迎小伙伴们的加入,一起秃头,一起变强。
..
✍️温馨提醒:本文字数:4129字, 阅读完需:约 8 分钟
一、前言🔥
回忆起虎年2022,我用css样式设计了一个小脑斧,活灵活现,很是喜人,正直新年来临之际,官方兔年创意活动也如约而至,那择日不如撞日,那bug菌就动点心思,给大家用点不一样的手段来实现一个应景萌宠兔兔吧,希望小伙伴们会喜欢。
其中说明一下,兔子制作思路来自站外一老哥的文章得而有感,经联系已获得制作参考权,大家非要纠结可私信我,这都问题不大,而文章是出自本人一手,如有雷同,纯属巧合,最重要的还是要大家看的开心,图一乐呵。
二、制作准备🔥
制作相对别的语言实现方式很简单,最终还是想用绘制小脑斧的方式来画一个兔兔,由于实现原理都类似,看过我去年那篇的同学都知道,我这里就不一一赘述了,文最后我也附上了源码地址,需要的同学可以去参考。
简单给大家说一下,我们如何制作它,需要准备那些,我就给大家先讲讲如何开始制作,我们要先创建一个html静态页面,加上css样式,我觉得就足够了,不需要多么复杂,能不能实现你们就等着看好戏吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳跃兔子</title>
</head>
<style></style>
<body>
<!--大展身手-->
</body>
</html>
复制代码
三、代码演示🔥
接下来我要带着你们一部分一部分的完成这部作品,保证非常的详细,每一步我都会给出用意跟写法介绍,希望同学们不要走神,认真看。
主体部分
我们先来定义一个dom,页面中就包含 2 个元素,分别代表兔子和云朵:
<div class="rabbit"></div>
<div class="clouds"></div>
复制代码
并将兔子和云朵片设置在页面正中央展示,并设置一下背景色,最好颜色要与白色互斥些,这样方便凸显月兔。
body
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(#6fa8dc, black);
font-size: 30px;
复制代码
画兔兔主体
这里我们先画一个兔子的主体,并设置对应的参数,本身为白色。
.rabbit
width: 5em;
height: 3em;
color: whitesmoke;
background: currentColor;
border-radius: 70% 90% 60% 50%;
复制代码
画兔兔眼睛
眼睛?这里我们用到CSS中的radial-gradient() 函数,径向渐变
.rabbit
background:
radial-gradient(
circle at 4.2em 1.4em,
#333 0.15em,
transparent 0.15em
),
currentColor;
复制代码
画兔兔右耳
这里我们用css伪元素来画出兔子的右耳,具体参考如下代码:
.rabbit::before
content: '';
position: absolute;
width: 0.75em;
height: 2em;
background-color: currentColor;
border-radius: 50% 100% 0 0;
transform: rotate(-30deg);
top: -1em;
right: 1em;
复制代码
画兔子左耳
至于它的左耳,这里就用到了css阴影,具体参考如下代码:
.rabbit::before
border: 0.1em solid;
border-color: gainsboro transparent transparent gainsboro;
box-shadow: -0.5em 0 0 -0.1em;
复制代码
画兔兔的尾巴
至于尾巴的话,原理与画右耳一样,都是用到了css伪元素,具体参考如下代码:
.rabbit::after
content: '';
position: absolute;
width: 1em;
height: 1em;
background-color: currentColor;
border-radius: 50%;
left: -0.3em;
top: 0.5em;
复制代码
画兔兔腿
至于腿部分,这里可以用到阴影来制造,具体参考如下代码:
.rabbit::after
box-shadow:
0.5em 1em 0,
4em 1em 0 -0.2em,
4em 1em 0 -0.2em;
复制代码
画兔兔影子
用到box-shadow属性,画出盒子阴影部分来描绘兔子的影子效果,具体参考如下代码:
.rabbit
box-shadow: -0.2em 1em 0 -0.75em #333;
复制代码
制作到这里,给大家看下兔子的静态效果,是不是很像嫦娥手捧的月兔啦。
但这还没达到惊艳你们的效果,我还要再加点元素,比如让它跳起来,动起来,直接起飞。
画天空云朵
由于兔子跳跃元素单一,这里我们再来个点睛之笔,加点云朵点衬,云朵css实现可参考如下代码:
.clouds
width: 2em;
height: 2em;
color: whitesmoke;
background: currentColor;
border-radius: 100% 100% 0 0;
transform: translate(0, -5em);
.clouds::before,
.clouds::after
content: '';
position: absolute;
background-color: white;
bottom: 0;
.clouds::before
width: 1.25em;
height: 1.25em;
border-radius: 100% 100% 0 100%;
left: -30%;
.clouds::after
width: 1.5em;
height: 1.5em;
border-radius: 100% 100% 100% 0;
right: -30%;
复制代码
接着再用阴影画出云朵制造重叠效果。
.rabbit
z-index: 1;
.clouds,
.clouds::before,
.clouds::after
box-shadow:
5em -1em 0 0.2em,
2em 2em 0 -0.2em,
3em 1em 0 -0.1em,
-2em 2em 0 0.1em;
复制代码
模拟兔子跳跃动作
以上都是静止元素,最重要的我得让兔子跟云朵都动起来,所以接下来我带大家如何通过css写动画,具有很好的教学意义,大家认真看:
有小伙伴接触过动画效果制作的,都知道css3的这个属性animation,它就是用来为元素实现动画效果的,具体如何使用,这个就自己琢磨一下,入手很简单的。
而其中我实现兔子的跳跃动作也是用到了这个属性,增加兔子跳动的动画代码如下,请参考:
.rabbit
animation: hop 3s linear infinite;
@keyframes hop
20%
transform: rotate(-10deg) translate(1em, -2em);
box-shadow: -0.2em 1em 0 -1em #333;
40%
transform: rotate(10deg) translate(3em, -4em);
box-shadow: -0.2em 3.25em 0 -1.1em #333;
60%, 75%
transform: rotate(0deg) translate(4em, 0);
box-shadow: -0.2em 1em 0 -0.75em #333;
复制代码
其中还得增加兔子的腿的伸缩动画,实现css代码如下:
.rabbit::after
animation: kick 3s infinite linear;
@keyframes kick
40%
box-shadow:
0.5em 2em 0,
4.2em 1.75em 0 -0.2em,
4.4em 1.9em 0 -0.2em;
复制代码
如上我们就制作好了一个动态兔,看着元素还是有些单一,那好吧,既然静态的元素都能动起来,那我们增加云朵动画,这样一个活态的效果就很生动了。
增加云朵飘动动画
依葫芦画瓢,这里与制作动态兔的原理一样,就不仔细渗透了,直接上代码:
.clouds
animation: cloudy 3s infinite linear forwards;
filter: opacity(0);
@keyframes cloudy
40%
transform: translate(-3em, -5em);
filter: opacity(0.75);
55%
transform: translate(-4em, -5em);
filter: opacity(0);
复制代码
以上基本就大功告成啦!给大家看一眼绘制完成后的静止画面动画,这是其中的某一帧,至于完整的演示,大家稍安勿躁,请看下一段,我一定都会为大家考虑好的。
四、在线演示🔥
这里我们就不给别地儿打广告了,直接用掘金自带的在线编译器,使用起来非常的灵活简便,其中本文所有源码我皆已上传,喜欢的小伙伴欢迎给个三连呢,创意设计及撸码不易,需要大家的一点点鼓励。「码上掘金入口」,如下是为了给暂时不方便上手的小伙伴,且又想看代码运行实际效果的而特地准备哒,可爱小兔兔奉上,请笑纳。
五、寄语🔥
最后,马上快过春节了,如果你看到这篇文章就给你拜个早年啦,祝你新的一年扬眉兔气,钱兔似锦,最重要的还是发大财啦!!!🥳
我是bug菌,一名想走👣出大山改变命运的程序猿。接下来的路还很长,都等待着我们去突破、去挑战。来吧,小伙伴们,我们一起加油!未来皆可期,fighting!
感谢认真读完我博客的铁子萌,在这里呢送给大家一句话,不管你是在职还是在读,绝对终身受用。
时刻警醒自己:
抱怨没有用,一切靠自己;
想要过更好的生活,那就要逼着自己变的更强,生活加油!!!
以上是关于快看,他纯用css绘制出了嫦娥手捧的月兔,关键还能飞,牛的主要内容,如果未能解决你的问题,请参考以下文章
焦点对话:Moon Rabbit(月兔)掀起MEME狂潮 理性背后仍具有百倍升值空间
思否技术周刊 | 微软联手苹果开发手柄AI 助力嫦娥五号登月Win10 2021 年版将支持运行安卓 App
css 在事件日历的月视图中隐藏过去的事件 - 之前:http://cl.ly/3x2o3N2K3z1r - 之后:http://cl.ly/0H431E2L0i17
css 在事件日历的月视图中隐藏过去的事件 - 之前:http://cl.ly/3x2o3N2K3z1r - 之后:http://cl.ly/0H431E2L0i17