弹珠css3,使用CSS3实现的弹球小动画
CSS
语言：
CSSSCSS
确定
body {
background: #111;
width: 330px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -165px;
margin-top: -135px;
}
span {
width: 70px;
height: 70px;
animation: rotation 1s ease-out infinite;
-webkit-animation: rotation 1s ease-out infinite;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
left: 0;
bottom: 0;
}
.circle {
border: 5px solid #31beff;
width: 70px;
height: 70px;
border-radius: 150px;
box-sizing: border-box;
animation: bounce 1s infinite;
-webkit-animation: bounce 1s infinite;
position: absolute;
z-index: 2;
top: 0;
}
.face {
width: 100%;
height: 100%;
position: absolute;
border: 5px solid #dc2114;
box-sizing: border-box;
}
.front {
-webkit-transform: translate3d(0, 0, 35px);
transform: translate3d(0, 0, 35px);
}
.top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 35px);
transform: rotateX(90deg) translate3d(0, 0, 35px);
}
.one {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.two {
animation-delay: -1.2s;
-webkit-animation-delay: -1.2s
}
.three {
animation-delay: -1.6s;
-webkit-animation-delay: -1.6s;
}
figure {
width: 70px;
height: 200px;
position: relative;
display: inline-block;
vertical-align: top;
margin: 20px;
}
@keyframes rotation {
0% {
transform: rotateX(0deg)
}
60% {
transform: rotateX(0deg)
}
100% {
transform: rotateX(-90deg)
}
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotateX(0deg)
}
60% {
-webkit-transform: rotateX(0deg)
}
100% {
-webkit-transform: rotateX(-90deg)
}
}
@keyframes bounce {
0% {
top: 0;
}
10% {
top: 5px;
}
20% {
width: 60px;
height: 80px;
margin-left: 5px;
}
40% {
top: 67px;
width: 80px;
height: 65px;
margin-left: -5px;
}
65% {
top: 0;
}
70% {
top: -5px;
}
}
@-webkit-keyframes bounce {
0% {
top: 0;
}
10% {
top: 5px;
}
20% {
width: 60px;
height: 80px;
margin-left: 5px;
}
40% {
top: 67px;
width: 80px;
height: 65px;
margin-left: -5px;
}
65% {
top: 0;
}
70% {
top: -5px;
}
}
弹珠css3,使用CSS3实现的弹球小动画相关推荐
- Java之Eclipse实现——弹球小动画（轨迹和线框版本）
Tips:Eclipse要实现小动画的制作,需要一些包和小插件才可以实现 思路:要实现一个无限循环的小球碰撞弹回过程,要考虑以下几点:首先,考虑小球的运动状态,没有碰到边界时的惯性运动状态和碰到边界时 ...
- CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- html5鼠标滑过图片 图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法 在页面中引入boot ...
- python弹球游戏实验报告_弹珠小游戏课程设计实验报告
摘要: 这个小程序是关于弹珠的小游戏, 游戏比较简单, 以小球的速度来区分游戏的难易. 该小程序是用左右键控制游戏的开始和挡板的方向,不让小球落到底端,当然,小球的 速度越快,该游戏的难度也就越大.此 ...
- 使用Scratch制作项目《弹珠游戏》
不知道大家有没有听说过这样一句话,"80后玩弹珠,90后玩游戏,00后怎么消遣业余时间?不是王者就是吃鸡." 作为一名90后,我们对打弹珠在熟悉不过了,今天,我们就来了解以下如果使 ...
- 前端技术搭建弹珠小游戏（内附源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面 上周我们实通过前端基础实现了小人逃脱,当 ...
- [Usaco2007 Oct] Super Paintball超级弹珠
Time Limit: 5 Sec Memory Limit: 64 MB Submit: 489 Solved: 384 [Submit][Status][Discuss] Descriptio ...
- css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- debounceTime 和 throttleTime 的弹珠图
debounceTime:测试代码 import {concat,debounceTime,filter,interval,mapTo,of,take,throttleTime, } from 'rx ...
最新文章
- 美国加州大学圣克鲁兹分校王鑫教授招收NLP/CV方向全奖博士生
- SA区坏道数据恢复的经历
- python并发编程之多进程理论部分
- 3、Swing布局管理器
- mysql 数据库的同步问题
- py-rfcn算法caffe配置，训练及应用到自己的数据集
- 日志 php_高性能的PHP日志系统 SeasLog 使用
- where is Angular parts filled
- 漫画算法：无序数组排序后的最大相邻差值
- [react] 如果组件的属性没有传值，那么它的默认值是什么？
- Java I/O体系详细讲解
- 618购物节，我用python逛淘宝、亚马逊，摸鱼被领导发现了
- lms自适应滤波器matlab_自适应回声消除器简介
- Python NetworkX – Python图形库
- python期末考试及答案单引号、双引号和三引号_python脚本中单引号’ 双引号“ 三个单引号‘’‘ 三个双引号”“” 差别 及反斜杠的用法...
- 实现音视频编解码工具 MediaCodec 创建解码器
- 通过纯真IP数据库查询IP归属地信息
- 企业资源规划 ERP
- 韶大talk 评论热度抽取
- 2.1 Vision-Language Pre-Training for Multimodal Aspect-Based Sentiment Analysis