站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

手把手带你使用CSS绘制一个可爱卡通狮子动画

时间:2022-04-23 [网络编程]作者:fabuyuan 浏览:7 次

怎么利用CSS绘制狮子动画?下面本篇文章手把手带大家一步步利用CSS绘制一个可爱卡通狮子动画,希望对大家有所帮助。

本期我们要使用纯css来绘制出一个乖巧可爱的卡通狮子,通过这个栗子我们可以熟悉更多的css绘制技巧,相信在以后的界面绘制任务中更加得心应手。【推荐学习:css视频教程

演示

正文

基础绘制

我们在先来康康这只狮子有哪些部分组成:

通过以上视图,这只狮子是由 耳朵+眼睛+鼻子+胡须+嘴巴+鬃毛+前腿+爪子+尾巴 这些部分组成。相信大家不难看出很多部位可以通过非常简单做矩形和圆角句可以完成他们。比如眼睛,就是两个圆形堆叠而成,具体可以看上面的代码演示,这里对于这些基础图形就不做过多讲述了。

接下来,我们就具体说说,一些不好绘制的图形吧。

耳朵

可以看到它似半圆形,像是花瓣一样,常规方法来做的话肯定是不好实现的, 但可以通过 clip-path 属性,它是使用裁剪方式创建元素的可显示区域,其区域内的部分显示,区域外的隐藏。而绘制耳朵,我们就利用这区域裁剪,其 ellipse 椭圆裁切的方法,其 两个传入至分别表示其裁切的半径,而at后的两个值则代表裁切的x与y轴的坐标。

.ear {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 10px;
    background-color: var(--skin-color);
    z-index: 9;
    border-radius: 40px;
    clip-path: ellipse(100% 100% at -20% -10%);
}

同理,那个类似于半圆的身体也是通过 clip-path: ellipse 来实现的,当然不止于此他可以裁剪出任何图形来,可以说非常的强大了。

鼻子

鼻子是一个三角形而构成,css绘制三角形也是一个小技巧,就是把 widthheight 设为 0,单纯使用 border 属性来完成,设置 border-width 使其代替块的宽高,但其块的内部是由四个小三角形拼成的矩形了,然后因为排布是上右下左的顺序,所以只要给其中一个角的颜色赋值即可实现一个三角形。

.nose {
    width: 0px;
    height: 0px;
    border-width: 20px 30px;
    border-style: solid;
    border-color: var(--eye-color) transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 40px;
    z-index: 3;
}

尾巴

尾部主要也是利用 border 来实现,画一个矩形div块,让他旋转一定角度,然后只绘制其中一个边框,然后再使用 border-radius: 40% 50% , 给它弯曲的一种感觉就大功告成了。

.tail {
    width: 320px;
    height: 320px;
    position: absolute;
    top: -137px;
    border-style: solid;
    border-width: 30px;
    border-radius: 40% 50%;
    border-color: transparent var(--tail-color) transparent transparent;
    transform: rotate(125deg);
    left: -180px;
}

动画制作

摇尾巴

尾部的力量都源于尾巴根,所以要从根部进行一个轻微摇摆的旋转动画,所以,我们就利用到了 transform-origin 属性,它可以让你更改一个元素变形的原点,如,根部发力那么就直接设置成 transform-origin: 50% 100% 也可以写成 transform-origin: center bottom

第一个参数代表了定义变形中心距离盒模型的左侧的偏移值。

keywordvalue
left0%
center50%
right100%

第二个参数代表了定义变形中心距离盒模型的顶的偏移值。

keywordvalue
top0%
center50%
bottom100%

后面的动画微微的旋转偏移就看下方的代码块了,非常简单只需要微调一些角度和偏移即可。这里再多补充一句,transform 的变换必须是盒模型定位的元素哦。

.tail {
  // ...
  animation: 1s wagging ease-in-out infinite alternate forwards;
  transform-origin: 50% 100%;
}

@keyframes wagging {
  0% {
    transform: rotate(125deg) translateX(0) translateY(0px);
  }
  100% {
    transform: rotate(130deg) translateX(15px) translateY(-15px);
  }
}

眨眼睛

眼睛一眨一眨会显得狮子会更生动,但是如果通过缩小高度做动画实现的画,会显得非常难看因为连眼白眼珠都会压缩变形。所以我们依然是通过 clip-path 属性,利用 ellipse 方法把裁剪范围从顶部和底部往中间延伸,直至2%留一道缝隙即可。

.eye {
  // ...
  animation: 4s blinking infinite forwards;
  overflow: hidden;
}
@keyframes blinking {
  0%,
  40%,
  80% {
    clip-path: ellipse(100% 100% at 50% 48%);
  }
  60%,
  100% {
    clip-path: ellipse(100% 2% at 50% 48%);
  }
}

看简简单单的几段css代码就让一只灵动乖巧的狮子就坐在你的面前,赶紧尝试一下吧~

(学习视频分享:web前端)

以上就是手把手带你使用CSS绘制一个可爱卡通狮子动画的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css动画

转载请注明来源:手把手带你使用CSS绘制一个可爱卡通狮子动画

本文永久链接地址:https://www.adminjie.com/post/11533.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle怎么关闭em

      oracle怎么关闭em

      方法:1、用“emctlstatusdbconsole”查看em状态;2、用“emctlstopdbconsole”使em停止运行;3、用“emca-...

    • jquery怎么添加和移除元素

      jquery怎么添加和移除元素

      添加元素的方法:1、用append()或prepend()在指定元素内部添加子元素;2、用after()或before()添加同级元素。移除方法:1、用remo...

    • oracle怎么实现读写分离

      oracle怎么实现读写分离

      实现读写分离的方法:1、利用Oracle自身组件,包括Physical方式支持的异步传输方式和logical方式支持的同步传输方式;2、利用第三方组件,包括Sh...

    • 什么是jquery异步加载

      什么是jquery异步加载

      在jquery中,异步加载又称为非阻塞加载,一般指在加载的同时执行代码;也就是当浏览器在加载JQ或JS的同时,还会进行后续页面处理,这样可以优化脚本文件的加载,...

    • oracle转为数字的函数是什么

      oracle转为数字的函数是什么

      oracle中转为数字的函数是“to_number”;该函数可将按一定格式编排过的字符串变回数值型的格式,字符串必须符合数值类型格式,若不符合则会出现错误提示,...

    热门文章