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
用CSS编写样式，模仿谷歌的标记！很详细哦！
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
【纯CSS3 3D旋转科技球体动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中，这样的特效可以增强用户体验，使网站或应用...
【HTML+CSS模仿大学网站主页】是一个典型的网页设计项目，主要使用了HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）两种核心技术来构建一个静态的大学主页。在这个项目中，没有涉及到JavaScript...
在CSS3中，`animation`属性是一个强大的工具，它允许我们创建复杂的动态效果，比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力，还能提供更好的交互体验。接下来，我们将深入...
【标题】：仿360加速球（实现内存释放） 在Android开发中，仿360加速球的设计是一种常见的优化用户界面（UI）的方式，它通常表现为一个小图标或悬浮窗，能够实时显示设备的内存使用情况，并提供一键清理内存的功能...
【CSS模仿51job】项目解析与实践 在网页设计领域，模仿知名网站的界面布局是一种常见的学习方式，其中“51job”作为中国知名的招聘网站，其界面设计简洁、功能明确，是学习CSS布局和样式设计的良好案例。本篇文章将...
在本项目中，“模仿vivo官网html+css.zip”是一个包含HTML和CSS代码的压缩包，目的是为了构建一个类似于vivo官方网站的页面。这个项目主要关注于前端开发，特别是HTML和CSS这两门核心技术，用于创建网页结构和样式。...
本项目"水平导航纯CSS模仿百度导航.zip"旨在通过CSS技术，模仿百度导航栏的样式和功能，为开发者提供一个实践和学习的机会。 在CSS（Cascading Style Sheets）中，实现水平导航主要涉及到以下几个关键知识点： 1. ...
【GitHub前端界面模仿学习】 在前端开发中，模仿知名网站如GitHub的界面是常见的学习方法。这个项目聚焦于GitHub的首页和注册页，通过HTML和CSS来实现静态页面的复刻，旨在帮助初学者理解前端网页布局、样式设计...
以上是创建“js+css模仿qq相册”项目涉及的主要技术点。通过实践这些知识，你不仅能创建出一个实用的相册应用，还能提升自己的前端开发技能。在压缩包中的"codefans.net"可能包含实现这个项目的源代码，供你参考学习...
在本文中，我们将深入探讨如何使用CSS和JavaScript创建一个3D旋转球的互动效果。这个效果结合了CSS的转换（transform）属性以及JavaScript的事件监听和动态修改样式，以实现与用户鼠标的交互。 首先，CSS是层叠样式...
本项目中提到的"css3绘制的打乒乓球动画特效"利用了CSS3的关键帧动画（keyframes animation）特性，创建了一个生动有趣的交互效果，即左右两个乒乓球拍自动打乒乓球的场景。下面我们将详细讨论这个知识点。 首先，...
"HTML+CSS模仿Windows7桌面效果.pdf" 这篇文章主要讲述如何使用HTML和CSS来模仿Windows7桌面效果，达到类似于Windows7桌面的视觉效果。文章中作者使用了CSS3来实现Windows 7开始菜单的动态效果，并且分享了实现桌面...
【标题】：“模仿问卷星个人版html+css” 在网页设计和开发中，"模仿问卷星个人版html+css" 是一个常见的练习项目，旨在学习和掌握如何利用HTML（超文本标记语言）和CSS（层叠样式表）来构建一个类似于问卷星个人版...
本项目是模仿天猫网站的返回顶部效果，使用了HTML、JavaScript（JQuery）、CSS这三种核心技术来实现。 首先，我们来看HTML部分。在`index.html`文件中，通常会有一个隐藏的按钮元素，例如一个div或a标签，当用户...
HTML和CSS是构建网页的基本技术，本项目是一个实践案例，旨在教授如何使用它们来模仿创建一个问卷星登录页面。在“HTML+CSS模仿做的问卷星登录页面.zip”压缩包中，包含了一个名为“WJX”的文件，这可能是网页源代码...
HTML 和 CSS 是构建网页的基本技术，本项目"html+CSS电光球动画源代码.zip"显然是一个关于如何使用这两种语言创建动态电光球效果的教学资源。这个压缩包包含了一个名为"电光球"的文件，可能是一个 HTML 文件和/或 ...
基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于...