Animate是用css给前端加载动画的效果：

网址：https://daneden.github.io/animate.css/

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" href="static/css/Animate.css">

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div  class="animated pulse " style="animation-iteration-count:4" >

        动画

    </div>

    <div  class="animated fadeOutRight infinite" style=" -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(0,-30px, 0);" >

        动画

    </div>

    <div  class="animated bounceOut infinite "  >

        动画

    </div>

</body>

</html>

在给代码加载动态时候，需要在它前面加入class:animate (实现循环一次需要的时间设置)infinite （无限循环）。

修改循环时间：animation-duration: 4s;    修改循环次数：animation-iteration-count:4;修改循环时的x、y、z坐标：transform: translate3d(0,0, 0)，x、y、z是指以起点作为坐标。

from rest_framework import serializers

from rest_framework.decorators import api_view,authentication_classes

from rest_framework.response import Response

from rest_framework.authentication import TokenAuthentication

from rest_framework.authtoken import views

from goods.models import GoodsInfo

class GoodsSerializers(serializers.ModelSerializer):

    class Meta:

        model = GoodsInfo

        fields = '__all__'

@api_view(['get'])

def info(request):

    info_list = GoodsInfo.objects.all()

    serializer = GoodsSerializers(info_list, many=True)

    return Response(serializer.data)

textarea 禁止拉伸：resize:none

												


											
Animate与transform的使用的更多相关文章
	

    
								
  1. jquery 的animate 的transform
		
    $(function(){ var t = 1000; $("#id").animate( {borderSpacing:180}, //180 指旋转度数 { step: fun ...
    
		
    2. 
						
  2. 酷炫的loading
		
    今天分享一下,怎么通过用css写出一个酷炫的loading. meta: <meta name="viewport" content="width=device-w ...
    
		
    3. 
						
  3. 62.纯 CSS 创作一只蒸锅（感觉不好看呀）
		
    原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...
    
		
    4. 
						
  4. 25.纯 CSS 创作一个慧星拖尾效果的 loader 动画
		
    原文地址:https://segmentfault.com/a/1190000014916281 简化地址:https://codepen.io/pen/?editors=1100 HTML代码: & ...
    
		
    5. 
						
  5. 10.纯 CSS 创作一个同心圆弧旋转 loader 特效
		
    原文地址:https://segmentfault.com/a/1190000014682999 想到了扇形:正方形 ->border-radius: 50%; ->取四份中的任意一份.  ...
    
		
    6. 
						
  6. [翻译]：Cinemachine 官方文档（0）
		
    目录 Overview : Installation and Getting Started :安装并开始 User Guide :用户指南 What is Cinemachine? : 什么是Cin ...
    
		
    7. 
						
  7. SVG Animation
		
    原文:http://tutorials.jenkov.com/svg/index.html http://tutorials.jenkov.com/svg/svg-animation.html SVG ...
    
		
    8. 
						
  8. 一款基jquery超炫的动画导航菜单
		
    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...
    
		
    9. 
						
  9. 动态svg效果
		
    import React from 'react'; import TweenOne from 'rc-tween-one'; import SvgDrawPlugin from 'rc-tween- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 用v-bind:style时的问题
			
    今天纠结了挺久一个问题,个人习惯是在HBuilder里先写好前端样式,在放.net去测试数据,但是发现一个问题 就是一个提示框跟随鼠标移动 提示框用v-bind:style绑定一个对象 DIV就是这句 ...
    
			
    2. 
						
  2. C# 添加Word页眉、页脚和页码
			
    在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...
    
			
    3. 
						
  3. jQuery(二)、选择器
			
    1.#id 根据给定的ID匹配一个元素,如果选择器中包含特殊字符,可以用双斜杆(\\) 转义 如: 查找ID 为 myDiv[bar] 的元素 HTML 代码: <div id="no ...
    
			
    4. 
						
  4. Huffman Tree 简单构造
			
    //函数:构造Huffman树HT[2*n-1] #define MAXVALUE 9999//假设权值不超过9999 #define MAXLEAF 30 #define MAXNODE MAXLE ...
    
			
    5. 
						
  5. vue中v-text / v-html
			
    vue中v-text / v-html使用 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
    
			
    6. 
						
  6. css——行内元素和块级元素的具体区别与行内块元素
			
    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
    
			
    7. 
						
  7. js当地天气调用
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    8. 
						
  8. [代码笔记]JS保持函数单一职责，灵活组合
			
    比如下面的代码,从服务端请求回来的订单数据如下,需要进行以下处理1.根据 status 进行对应值得显示(0-进行中,1-已完成,2-订单异常)2.把 startTime 由时间戳显示成 yyyy-m ...
    
			
    9. 
						
  9. 总结安装webpack过程中遇到的错误及解决方案
			
    1.安装不成功的报错: 解决方案:清除缓存 2.打包不成功: 解决方案:填写打包路径时的“__dirname”有两个下划线 3.打包报错: 解决方案:正确填写路径为“./style.css”
    
			
    10. 
						
  10. 浅谈Flutter（一）：搭建Flutter开发环境
			
    学习内容来自: Flutter中文网  . Flutter实战 -------------------------------------------------------------------- ...
    
			
    11.