HTML和css动画实现贪吃豆

效果图如下：

布局如下：

        <div class="top"></div><div class="bottom"></div><div class="bean bean1"></div><div class="bean bean2"></div><div class="bean bean3"></div><div class="bean bean4"></div></div>

样式如下：
.box{
margin: 100px auto 0;
width: 500px;
height: 300px;
transform-style: preserve-3d;
background-color: #008000;
}
.top{
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
/* border: 1px solid #0F0FFF; /
/ transform: rotateZ(-45px); */
animation: roll1 1s infinite;
background-color: #fff;

        }.bottom{width: 200px;height: 100px;border-radius: 0 0 100px 100px;/* border: 1px solid #0F0FFF; */animation: roll2 1s infinite;background-color: #fff;}@keyframes roll1{from{transform:  rotate(-45deg); }50%{transform:rotate(0deg);}to{transform:rotate(-45deg);                     }}@keyframes roll2{from{transform:rotate(45deg); }50%{transform:rotate(0deg);}to{transform:rotate(45deg);}}.bean{position: absolute;right: 0;top: 100px;width: 20px;height: 20px;border-radius: 20px;background-color: #fff;}.bean1{animation:bean 2s  0s infinite linear;}.bean2{animation: bean 2s 0.5s infinite linear;}.bean3{animation: bean 2s 1s infinite;}.bean4{animation: bean 2s 1.5s infinite;}@keyframes bean{from{/* transform: translateX(0); */opacity: 1;}50%{/* transform: translateX(-200px); */opacity: 0.1;}to{transform: translateX(-500px);opacity: 0;}}

HTML和css动画实现贪吃豆相关推荐

CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...

HTML和css动画实现贪吃豆

HTML和css动画实现贪吃豆相关推荐

最新文章

热门文章