css3 div跳动动画_小白兔白又白,用CSS3创作的可爱小白兔,萌化了

这篇博客介绍了如何使用CSS3创建一个跳动的小白兔动画。通过设置div的样式和使用flex布局,结合animation属性定义动画,实现了小白兔的跳跃效果。文章还展示了添加耳朵、尾巴、影子和云朵等细节的过程。
摘要由CSDN通过智能技术生成

同样先放最终效果图:

373b5bb6614e84ff157192af6fbbd20c.png
9a481e6220b7681739401cccd6e39545.png

动图演示:

5371e4059230013badcb35a63d1813d2.gif

一边听歌一边截的动图,所以图片下面有歌词闪过,大家忽视就好。

整个图像其实可以分为三个部分,一是蓝黑色的背景,二是三朵若隐若现的白云,三是这只往前跳的小兔子,背景可以直接在body里设置,因此我们的HTML主题部分就只需要下面两个div:

接着CSS里开始设置样式,先是整体的背景:

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(midnightblue, black); font-size: 20px; margin-top: 2em; overflow: hidden;}

引申一点相关知识:上面的CSS代码里display:flex其实是弹性布局,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

flex布局有以下6个属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

其中,我们的代码里面用到的justify-content:center定义了项目在主轴上的对齐方式为center。

接下来设置小白兔:

.rabbit { width: 5em; height: 3em; color: whitesmoke; background:  radial-gradient( circle at 4.2em 1.4em, #333 0.15em, transparent 0.15em ), /* eye */ currentColor; border-radius: 70% 90% 60% 50%; box-shadow: -0.2em 1em 0 -0.75em #333; z-index: 1; animation: hop 1s linear infinite;}

大体都是一些基础的设置,这里着重介绍一下 animation: hop 1s linear infinite;这句。

animation是CSS3里的一个动画设置,使用上面的代码,将把 animation 绑定到一个hop这个div元素,因此我们需要写一个hop来实现小白兔前后跳动的动画:

@keyframes hop { 20% { transform: rotate(-10deg) translate(1em, -2em); box-shadow: -0.2em 3em 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; }}

就这样,我们得到了一个光头往前跳动的小白兔:

10bf3b7fe1fe5818689b20499d33636b.png

其实还挺可爱的~

下面我们给小兔子加上耳朵:

.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; border: 0.1em solid; border-color: gainsboro transparent transparent gainsboro; box-shadow: -0.5em 0 0 -0.1em; }

加上耳朵后如下:

7310b6fdec29e7b8986195953b9044d2.png

加上尾巴和影子:

.rabbit::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: currentColor; border-radius: 50%; left: -0.3em; top: 0.5em; box-shadow: 0.5em 1em 0, 4em 1em 0 -0.2em, 4em 1em 0 -0.2em; animation: kick 1s infinite linear;}
65a6636f9005478111f916c259dda6af.png

最后,给小白兔加上四周的白云:

.clouds { width: 2em; height: 2em; color: whitesmoke; background: currentColor; border-radius: 100% 100% 0 0; transform: translate(0, -5em); animation: cloudy 1s infinite linear forwards; filter: opacity(0);}

云的动画以及细节调整这里就不在赘述了,再来看一张最终效果图:

799026e94a9b1286a5dd50c9c4789ac5.png

今天的小练习就到这里啦。

需要完整代码的朋友可以留言或私信我获取。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值