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. KVM虚拟化使用详解--技术流ken
			
    KVM介绍 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. KVM的虚拟化需要硬件支持 ...
    
			
    2. 
						
  2. .Net Core 实践 - 如何在控制台应用(.Net Core)使用appsettings.json配置
			
    新建控制台应用(.Net Core)程序 添加json文件,命名为appsettings.json,设置文件属性 如果较新则复制.添加内容如下 { "MyWords" : &quo ...
    
			
    3. 
						
  3. Map集合。
			
    Map集合: java.util,Map<k,v> 特点:1.键值对 2.key-value一一对应 3.key不允许重复. Map常用实现类: java.util.HashMap< ...
    
			
    4. 
						
  4. EF 外键不显示、如何让外键显示！增、删、改 操作时，外键不显示，只显示导航属性！
			
    一.问题描述:EF 外键不显示.如何让外键显示!增.删.改 操作时,外键不显示,只显示导航属性! EF 添加.增加.插入数据时,外键不显示! 二.解决方案:在根据数据库生成模型的时候,选中“在模型中” ...
    
			
    5. 
						
  5. PHP进程信号处理
			
    PHP进程信号处理 php有一组进程控制函数PCNTL,使得php能在*nix系统中实现跟c一样的创建子进程.使用exec函数执行程序.处理信号等功能. 注意:pcntl这个扩展仅在cli/cgi模式 ...
    
			
    6. 
						
  6. git创建分支并提交到远程分支
			
    来自:https://www.cnblogs.com/bluestorm/p/6252900.html 侵删 git branch(分支命令的使用http://hbiao68.iteye.com/bl ...
    
			
    7. 
						
  7. fullpage 全屏插件
			
     fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...
    
			
    8. 
						
  8. Kotlin 扩展——省略findViewById
			
    现在 Kotlin 安卓扩展插件能够提供与这些开源库功能相同的体验,不需要添加任何额外代码. import kotlinx.android.synthetic.main.activity_main.* ...
    
			
    9. 
						
  9. jmeter使用TCP请求时，乱码问题，字符集设置
			
    不墨迹,直接上干货.(提示:UTF-8一个汉字占3个字节) TCP请求默认发的是GBK字符集,要想修改成UTF-8,只需要修改bin目录下的jmeter.properties文件,其中tcp.char ...
    
			
    10. 
						
  10. Git - git branch - 查看本地仓分支列表
			
    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git branch 二.说明: 该命令将列出本地所有存在分支, 包括 本地独有分支与远端在本地签出的分支, 但是没有签出的远端 ...
    
			
    11.