css动画--吃豆豆

最新推荐文章于 2023-10-21 21:07:45 发布
最新推荐文章于 2023-10-21 21:07:45 发布
阅读量418 收藏 1
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42253718/article/details/109712960
版权

完全不用js也能写出很好看的css动画

  • 重点用到的就是**@keyframes和animation**这两个让他们动起来
  • 盒子阴影box-shadow: 300px 0px 0px -80px white,
    300px:左右移动 0px:上下移动 0px:阴影范围 -80px:阴影大小 white:颜色

动图截图–图片在cdd

整体代码如下

以下是用到的VsCode软件，个人觉得比HBuilder好用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我要吃豆豆</title>
    <style>
        body{
            background-color: black;
        }
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            box-shadow: 300px 0px 0px -80px white,
            450px 0px 0px -80px white,
            600px 0px 0px -80px white,
            750px 0px 0px -80px white,
            900px 0px 0px -80px white;
            border-radius: 50%;
            animation: go 1s infinite linear;
        }
        @keyframes go{
            0%{box-shadow: 300px 0px 0px -80px white,
                450px 0px 0px -80px white,
                600px 0px 0px -80px white,
                750px 0px 0px -80px white,
                900px 0px 0px -80px white;
            }
            100%{box-shadow: 150px 0px 0px -80px white,
                300px 0px 0px -80px white,
                450px 0px 0px -80px white,
                600px 0px 0px -80px white,
                750px 0px 0px -80px white;
            }
        }
        .box .top{
            width: 200px;
            height: 100px;
            background-color: blue;
            border-radius: 110px 110px 0 0;
            margin-left: 100px;
            animation: go1 1s infinite;
        }
        .box .bop{
            width: 200px;
            height: 100px;
            background-color: blue;
            border-radius: 0 0 110px 110px;
            margin-left: 100px;
            animation: go2 1s infinite;
        }
        .box .eye{
            position: absolute;
            top: 30px;
            left: 180px;
            width: 30px;
            height: 30px;
            background-color: black;
            border-radius: 50%;
        }
        @keyframes go1{
				0%{transform: rotate(0deg);}
				50%{transform: rotate(-30deg);}
				100%{transform: rotate(0deg);}
			}
        @keyframes go2{
            0%{transform: rotate(0deg);}
            50%{transform: rotate(30deg);}
            100%{transform: rotate(0deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="eye"></div>
        <div class="bop"></div>
    </div>
</body>
</html>
放空231
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css制作超萌吃豆豆加载动画效果
09-24
主要介绍了css制作超萌吃豆豆加载动画效果,需要的朋友可以参考下
css3实现吃豆豆动画效果
weixin_54106682的博客
06-28 200
css3实现吃豆人动画
【动画消消乐 】HTML+CSS 吃豆豆动画 073
海到无边天作岸 山登绝顶我为峰
06-11 5133
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 Demo代码 HTML <
吃豆豆
m0_52354769的博客
04-08 150
吃豆豆案例总结 效果图 HTML部分 主要使用div 以及标签class <div class="mouth"> <div class="mouth-top"></div> <div class="mouth-bottom"></div> </div> css部分 静态的使用 1.将盒子有矩形调试为圆形。 .mouth{ width:200px; height: 200px;
css吃豆豆动画
weixin_64729620的博客
10-21 624
* alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 *//* box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色 *//* 需要转为块元素才能设置宽高 *//* 利用阴影多制造几个豆豆 *//* 伪元素类似于span *//* 旋转中心 */
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
热门推荐
油墨香^-^的博客
06-22 3万+
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。 语法 CSS 代码: /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | bl
CSS实现吃豆豆效果
weixin_41545048的博客
07-17 450
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>吃.
吃豆豆动画特效
qq_46262513的博客
04-06 290
小白叶能看懂的代码吃豆豆动画特效（零基础） CSS样式展示 1.1默认样式清零 * { /* 默认样式 */ padding: 0px; margin: 0px; /* 背景颜色 */ background-color: black; 1.2 div { width: 200px; height: 200px; /* 上边距 */ margin-top: 100px; /* 大盒子圆角设置 */ border-radius: 50% 5
css3制作吃豆豆动画
兜兜的博客
06-02 759
本次主要制作了吃豆豆动画，解决的主要问题是动画的跳动问题。
HTML5+CSS3 吃豆豆代码
记录学编程后遇到的问题，注意点以及相关知识
10-25 1461
吃豆豆 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吃豆豆动画</title> <style> body {
CSS动画-滑动拼图验证码
最新发布
03-21
CSS动画-滑动拼图验证码
常见css动画-解压直用
09-18
常见css动画 web前段开发 解压直用
1.08 css3-动画
10-07
1.08 css3-动画
css动画 - 把你喜欢css动画嵌入到浏览器中
06-01
一、齿轮Loading 二、笑脸Loading 三、圆盘Loading 四、海绵宝宝 五、个人明信片 六、页面面板UI 七、开厂动效
CSS transform-origin属性的理解
09-22
主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践，非常具有实用价值，需要的朋友可以参考下
CSS：吃豆子动画
m0_57835615的博客
06-03 207
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <tit...
css3动画实现吃豆豆效果
刺激的马飞博客
08-19 224
使用css3动画实现物体的平移旋转
html+css小练习1-吃豆豆
qq_43327962的博客
03-11 284
html+css小练习1-吃豆豆 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>吃豆豆</title> <style> body { margin: 0; background-...
css3动画-animation各个属性详解
06-28
### 回答1： CSS3动画是一种非常强大的动画技术，它可以让网页变得更加生动、美丽。本文将为大家详细介绍CSS3动画的各个属性，包括动画名称，持续时间，延迟时间，动画速度曲线，以及动画的执行次数等。 动画名称（animation-name）：与CSS中的类似，动画名称是指定CSS3动画所使用的关键帧动画。这个属性用来指定一个已定义的动画名称，以便调用该动画。 持续时间（animation-duration）：定义CSS3动画的持续时间。默认值为0，表示没有动画效果。通过使用单位“秒（s）”或“毫秒（ms）”来定义动画的持续时间。 延迟时间（animation-delay）：指定动画开始前的等待时长。默认值为0，即动画将立即开始。通过使用单位“秒（s）”或“毫秒（ms）”来定义延迟时间。 动画速度曲线（animation-timing-function）：定义动画的速度曲线，可以使动画有更加自然的过渡效果。使用缓动函数可以让动画更具有灵活性，可以在不同的时间点采用不同的速度曲线，从而实现更复杂的动画效果。 动画执行次数（animation-iteration-count）：指定动画的执行次数。可以使用数字或者“infinite”关键字来指定动画的执行次数。如果将其设置为“infinite”则表示动画将一直持续执行下去。 动画方向（animation-direction）：指定动画是否循环播放，并且指定循环播放的方向。这个属性可以使用以下值：normal，reverse，alternate和alternate-reverse。 动画填充模式（animation-fill-mode）：指定动画在开始或结束时对元素的样式应该如何处理。使用这个属性可以让动画具有更加平滑的效果，可以避免由于动画结束时样式的改变而造成的过度影响。 总之，通过使用上述属性，我们可以为网页添加各种丰富的动画效果，让网页更加互动、生动，也更能吸引用户的眼球。 ### 回答2： CSS3动画是网页开发中非常常用的一种技术，通过使用动画属性可以给页面的元素增添动态的效果。本文将详细介绍CSS3动画的各个属性。 1. animation-name 该属性定义要绑定到要执行动画的@keyframes的名称。@keyframes是定义动画的关键帧的规则集合。 2. animation-duration 该属性定义了动画完成所需的时间，以秒或毫秒为单位。 3. animation-timing-function 该属性定义了动画执行的时间曲线。通过使用不同的时序函数，可以使动画更真实，更有质感。 4. animation-delay 该属性定义动画开始之前的延迟时间，以秒或毫秒为单位。 5. animation-iteration-count 该属性定义动画的迭代次数。可以将其设置为有限或无限。 6. animation-direction 该属性定义动画是否反向播放。 7. animation-fill-mode 该属性定义了元素在动画之前和之后的状态。可以设置为none、forwards、backwards或both。 8. animation-play-state 该属性定义动画的运行状态。可以将其设置为paused或running。 9. animation animation属性是所有动画属性的缩写。它接受每个属性的值作为逗号分隔列表。 总结： 上述就是CSS3动画常用属性的详细介绍。CSS3动画可以用来为页面增添动态效果，提高用户的交互体验。在实际开发中，可以通过不同的动画属性以及不同的取值方式，创建出各种不同的动画效果。在制作动画时，需要考虑兼容性问题，如果要兼容IE9及以下版本，我们还需要使用Vendor Prefix前缀来避免浏览器的兼容问题。 ### 回答3： CSS3动画是将元素从一个状态变换到另一个状态的方式，其中使用了一些简单的CSS属性。CSS3动画属性可以通过@keyframe规则或transition属性设置。它们可以用来创造一些很棒的效果，比如向上滚动的标题、浮动的按钮等。下面详细介绍一下CSS3动画涉及的各种属性。 1. animation-name：用来定义动画的名称，这个名称会由animation属性引用。 2. animation-duration：定义动画的持续时间。单位为秒（s）和毫秒（ms）。 3. animation-timing-function：定义动画的速度变化曲线。这个属性定义了过渡的速度，是一个三次贝塞尔函数。可以设置ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier等值。 4. animation-delay：定义动画开始之前的延迟时间。单位为秒（s）和毫秒（ms）。 5. animation-iteration-count：定义动画的重复次数。可以设置为一个具体的数字或infinite表示无限次重复。 6. animation-direction：定义动画结束后是否负向重复播放。可以设置为normal、reverse、alternate和alternate-reverse。 7. animation-play-state：定义动画是运行还是暂停。可以设置为paused和running。 8. animation-fill-mode：定义动画结束后如何应用样式。可以设置为none、forwards、backwards和both。 以上是CSS3动画中涉及的主要属性。其中最重要的要数animation-iteration-count和animation-duration两个属性。animation-iteration-count可以定义动画的重复次数，也可以设置为infinite表示无限次重复。animation-duration用来定义动画的持续时间，如果不设置，默认值为0，此时动画是不会播放的。在设置这两个属性时，需要根据具体情况来确定合适的数值，以达到最佳的动画效果。 总的来说，CSS3动画提供了丰富的效果和属性，可以应用于页面中的各种元素和功能，让页面更加生动、美观、时尚。在开发过程中，合理应用这些属性，可以使前端开发变得更加有趣和富有挑战性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值