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特性实现的视觉效果，它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中，这样的特效可以增强用户体验，使网站或应用...
简单的CSS3彩色旋转球体，炫酷的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）的方式，它通常表现为一个小图标或悬浮窗，能够实时显示设备的内存使用情况，并提供一键清理内存的功能...
【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”的文件，这可能是网页源代码...