HTML5CSS3 special effects-ball jumping up and down-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML5CSS3 special effects-ball jumping up and down

高洛峰

Oct 14, 2016 pm 03:36 PM

(-1)写在前面

我用的是chrome49，这个idea是我在stackoverflow上回答问题时看到了，多谢这位同行，加深了我对很多技术点的理解，最近刚到北京，忙碌了一两天，在后续的日子里，会被安排面试，学习计划只能按工作流走了，做完这个要看一个特别酷的效果，好激动!

(0)效果演示

（1）实现方案

动画效果都是用animation做的

（2）知识点详解

a. border-radius:40px;

当div的长高都是80px的时候，div是一个圆形，其实长高都是60px的时候也是圆型，同理都是40、30也是圆型，当然案例中没有使用这种方式。具体实现在代码中说明

b. position:absolute;

当div使用此属性时，margin：0 auto是无效的，小球使用了这个属性，他的水平居中的实现方式在代码中说明

c. animation:down 1.5s infinite alternate;

I.1.5s 是动画的持续时间，因为延迟时间出现在持续时间的后面，所以只出现一个带s的参数是持续时间。

II.这里的alternate是指反向播放动画，比如说一个动画的帧如下

@keyframes down
{
      from
{
  …
}
      95%
      {
           …
      }
      to
      {
           …
}
     
}

正向播放是from-95-to,反向播放to-95%-from

d. @keyframes down{95%{…}}

如果对应animate：down 1.5s;

动画在执行到95%就到达了最终状态，剩余5%的时间会用在回到初始状态。

(3)代码加解释

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
*
{
      margin:0;
      padding:0;
}
#lol
{
      margin:0px auto;
      top:100px;
      width:80px;
      height:80px;
      background-color:red;
      border-radius:40px;            
      position:absolute;
      left:160px;
      animation:down 1.5s infinite alternate;
}   
@keyframes down
{
      95%
      {
           width:15px;
           height:15px;
           border-radius:7.5px; /*保证div始终是个圆形*/
           top:300px;
           left:192.5px;/*保证小球始终水平居中*/
           background:blue;
      }
}
#frame
{
      width:400px;
      height:315px;
      margin:100px auto;
      border:1px red solid;
      position:relative;
}
#head
{
      width:400px;
      height:100px;
      text-align:center;
      font-size:40px;
      font-weight:bold;
      line-height:100px;
      background-image:-webkit-linear-gradient(90deg, #be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);
/*前面文章有提到*/
      -webkit-background-clip: text;/*剪切背景颜色，只在文字上显示*/
      -webkit-text-fill-color:transparent;/*文字填充为透明色*/
      background-size:100% 700%;    
/*前面文章有提到*/
      animation:bc 6s infinite;
}
@keyframes bc
{
      to
      {
           background-position:100% 100%;
/*前面文章有提到*/
      }
}
</style>    
<script type="text/javascript">
</script>
</head
<body>
      <div id="frame">
           <div id="head">Animatiom</div>
           <div id="lol"></div>
      </div>
</body>              
</html>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles