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>
.
相关推荐
用CSS编写样式，模仿谷歌的标记！很详细哦！
简单的CSS3彩色旋转球体，炫酷的CSS3入门实例，练练手吧。
【纯CSS3 3D旋转科技球体动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中，这样的特效可以增强用户体验，使网站或应用...
本项目通过`jq`（jQuery）库实现了对`select`控件的模仿，创建了一款既美观又实用的下拉框控件。下面将详细讲解这个知识点。 1. **jQuery (jq) 库的使用** jQuery 是一个轻量级的JavaScript库，它简化了HTML文档...
【HTML+CSS模仿大学网站主页】是一个典型的网页设计项目，主要使用了HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）两种核心技术来构建一个静态的大学主页。在这个项目中，没有涉及到JavaScript...
在CSS3中，`animation`属性是一个强大的工具，它允许我们创建复杂的动态效果，比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力，还能提供更好的交互体验。接下来，我们将深入...
【标题】：仿360加速球（实现内存释放） 在Android开发中，仿360加速球的设计是一种常见的优化用户界面（UI）的方式，它通常表现为一个小图标或悬浮窗，能够实时显示设备的内存使用情况，并提供一键清理内存的功能...
【CSS3牛顿摇摆球碰撞动画特效】是一种利用CSS3的强大功能来创建动态视觉效果的技术。在网页设计中，这种特效可以增加用户的交互体验，让页面更具吸引力。以下是关于这个特效的一些详细知识点： 1. **CSS3选择器与...
HTML和CSS是构建网页的基本技术，本项目是一个实践案例，旨在教授如何使用它们来模仿创建一个问卷星登录页面。在“HTML+CSS模仿做的问卷星登录页面.zip”压缩包中，包含了一个名为“WJX”的文件，这可能是网页源代码...
在本项目中，“模仿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允许我们...
【CSS3硬件加速与滑块实现】 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了许多增强用户体验的新特性，其中硬件加速就是一项重要的优化手段。硬件加速能够利用图形处理器（GPU）来处理某些复杂的视觉...
基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于...
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...