CSS模仿加速球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#tout, html, body {
width: 100%;
height: 100%;
}
#tout {
position: relative;
}
#tout:first-child div {
display: block;
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#tout:first-child>div>div {
width: 90px;
height: 90px;
border: 5px solid #fff;
border-radius: 50%;
margin: auto;
overflow: hidden;
}
#tout:first-child div div div {
width: 110px;
height: 110px;
margin: auto;
top: 360px;
background-color: #ddd;
border-radius: 0%;
border: none;
animation-name: anim, color;
animation-duration: 5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}
@keyframes anim{
100% { top:0 }
}
/* @keyframes color{
0% { background-color: green; }
25% { background-color: green; }
50% { background-color: red; }
75% { background-color: yellow; }
100% { background-color: blue; }
} */
</style>
</head>
<body>
<div id="tout">
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>
.
相关推荐
css3动画仿加速球水波流动效果 参考地址： https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
【纯CSS3 3D旋转科技球体动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中，这样的特效可以增强用户体验，使网站或应用...
本项目通过`jq`（jQuery）库实现了对`select`控件的模仿，创建了一款既美观又实用的下拉框控件。下面将详细讲解这个知识点。 1. **jQuery (jq) 库的使用** jQuery 是一个轻量级的JavaScript库，它简化了HTML文档...
【HTML+CSS模仿大学网站主页】是一个典型的网页设计项目，主要使用了HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）两种核心技术来构建一个静态的大学主页。在这个项目中，没有涉及到JavaScript...
【标题】：仿360加速球（实现内存释放） 在Android开发中，仿360加速球的设计是一种常见的优化用户界面（UI）的方式，它通常表现为一个小图标或悬浮窗，能够实时显示设备的内存使用情况，并提供一键清理内存的功能...
【CSS3牛顿摇摆球碰撞动画特效】是一种利用CSS3的强大功能来创建动态视觉效果的技术。在网页设计中，这种特效可以增加用户的交互体验，让页面更具吸引力。以下是关于这个特效的一些详细知识点： 1. **CSS3选择器与...
HTML和CSS是构建网页的基本技术，本项目是一个实践案例，旨在教授如何使用它们来模仿创建一个问卷星登录页面。在“HTML+CSS模仿做的问卷星登录页面.zip”压缩包中，包含了一个名为“WJX”的文件，这可能是网页源代码...
css3实现球体运动，效果炫酷，需要jquery和jquery.mousewheel插件，请自行下载。
在本项目中，“模仿vivo官网html+css.zip”是一个包含HTML和CSS代码的压缩包，目的是为了构建一个类似于vivo官方网站的页面。这个项目主要关注于前端开发，特别是HTML和CSS这两门核心技术，用于创建网页结构和样式。...
本项目"水平导航纯CSS模仿百度导航.zip"旨在通过CSS技术，模仿百度导航栏的样式和功能，为开发者提供一个实践和学习的机会。 在CSS（Cascading Style Sheets）中，实现水平导航主要涉及到以下几个关键知识点： 1. ...
【GitHub前端界面模仿学习】 在前端开发中，模仿知名网站如GitHub的界面是常见的学习方法。这个项目聚焦于GitHub的首页和注册页，通过HTML和CSS来实现静态页面的复刻，旨在帮助初学者理解前端网页布局、样式设计...
在本文中，我们将深入探讨如何使用CSS和JavaScript创建一个3D旋转球的互动效果。这个效果结合了CSS的转换（transform）属性以及JavaScript的事件监听和动态修改样式，以实现与用户鼠标的交互。 首先，CSS是层叠样式...
本项目中提到的"css3绘制的打乒乓球动画特效"利用了CSS3的关键帧动画（keyframes animation）特性，创建了一个生动有趣的交互效果，即左右两个乒乓球拍自动打乒乓球的场景。下面我们将详细讨论这个知识点。 首先，...
【标题】：“模仿问卷星个人版html+css” 在网页设计和开发中，"模仿问卷星个人版html+css" 是一个常见的练习项目，旨在学习和掌握如何利用HTML（超文本标记语言）和CSS（层叠样式表）来构建一个类似于问卷星个人版...
本项目是模仿天猫网站的返回顶部效果，使用了HTML、JavaScript（JQuery）、CSS这三种核心技术来实现。 首先，我们来看HTML部分。在`index.html`文件中，通常会有一个隐藏的按钮元素，例如一个div或a标签，当用户...
这个“js加css模仿淘宝评分插件”是一个示例项目，旨在教你如何使用这两种语言来创建类似淘宝购物平台的评分系统。下面我们将详细探讨相关的知识点。 1. **JavaScript基础**： - **DOM操作**：JavaScript允许我们...
HTML 和 CSS 是构建网页的基本技术，本项目"html+CSS电光球动画源代码.zip"显然是一个关于如何使用这两种语言创建动态电光球效果的教学资源。这个压缩包包含了一个名为"电光球"的文件，可能是一个 HTML 文件和/或 ...
【CSS3硬件加速与滑块实现】 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了许多增强用户体验的新特性，其中硬件加速就是一项重要的优化手段。硬件加速能够利用图形处理器（GPU）来处理某些复杂的视觉...
基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于...