zoukankan      html  css  js  c++  java
  • css3动画

    css3动画

    css3里面的animation属性非常强大,但是自己用的比较少,趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习

    css3动画用来做什么

    主要用来做一些页面的美化,和一些前端简单的动画比如:旋转,变形,若影若现,逐帧动画和x轴y轴的一些直线动画

    animation属性一览

    因为animation属性比较多,然后在w3c上看有点蛋疼,干脆也做了一份导图,以后想查看,就一目了然了

    css3的简单实现

    使用animation实现动画
    需求是:当我打开页面的时候,会有一个300*300的粉色的正方形从左边移动到右边。
    首先我们来看看CSS3是怎样使用动画的,可以大致分为两步:

    定义动画
    调用动画

    1. 如何定义动画
      定义动画需要用到 @keyframes 关键字,他的格式是下面这样的:
    @keyframes 动画名称 {
    	0% {
    		// 初始状态
    	}
    	100% {
    		// 结束状态
    	}
    }
    
    

    其中0%和100%可以用from和to代替,也就是:

    @keyframes 动画名称 {
    	from {
    		// 初始状态
    	}
    	to {
    		// 结束状态
    	}
    }
    
    
    1. 如何调用动画
      调用动画要用到 animation-name 以及 animation-duration 属性,前者是要调用的动画的名字,后者是该动画要持续的时长。比如:
      /* 第二步:使用动画 */
    animation-name: move;
    animation-duration: 1.3s;//完成动画的时间
    

    这样就OK了。
    最后附上实现开始需求的完成代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS动画的简单使用</title>
        <style>
            div {
                height: 300px;
                 300px;
                background-color: pink;
                /* 第二步:使用动画 */
                animation-name: move;
                animation-duration: 1.3s;//完成动画的时间
            }
            
            /* 第一步:定义动画 */ 
            @keyframes move {
                /* 初始状态 */
                0% {
                    transform: translateX(0);
                }
                /* 结束状态 */
                100% {
                    transform: translateX(1000px);
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    
    
  • 相关阅读:
    springboot日志框架
    springboot创建一个可执行的jar
    springboot整合Thymeleaf模板引擎
    springboot自定义SpringApplication启动类
    springboot配置mybatis的mapper路径
    使用@SpringBootApplication注解
    HDU1269 迷宫城堡 —— 强连通分量
    POJ3177 Redundant Paths —— 边双联通分量 + 缩点
    HDU3394 Railway —— 点双联通分量 + 桥(割边)
    UVA796 Critical Links —— 割边(桥)
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13662975.html
Copyright © 2011-2022 走看看