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. Java高阶语法---transient
			
    背景:听说transient Java高阶语法是挺进BAT必经之路. transient: Java中transient 关键字的作用,简单的说就是让某些被修饰的成员属性变量不被序列化. 这又扯到了序 ...
    
			
    2. 
						
  2. 配置多版本jdk
			
    配置办法https://blog.csdn.net/qq342643414/article/details/78364601 可能会遇到的问题https://www.cnblogs.com/chuij ...
    
			
    3. 
						
  3. 如何在windows系统下安装swoole
			
    swoole框架是一个很神奇很厉害的框架,它弥补了PHP的本身的一些不足之处.其实swoole确切的说是一个使用C语言编写的PHP扩展,并且这个扩展不能够在windows系统使用,但是就目前的开发环境 ...
    
			
    4. 
						
  4. JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！
			
    摘要: 理解JS执行原理. 原文:JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 本文是旨在深入研究JavaScrip ...
    
			
    5. 
						
  5. js将一个数组分成多个数组
			
    1,将数组array分成长度为subGroupLength的小数组并返回新数组 function group(array, subGroupLength) { let index = 0; let n ...
    
			
    6. 
						
  6. maven+springMVC(二)
			
    [目录]
    
			
    7. 
						
  7. vue echarts map的使用，页面多图动态自适应
			
    最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...
    
			
    8. 
						
  8. Python 经典面试题汇总之基础篇
			
    基础篇 1:为什么学习Python 公司建议使用Python,然后自己通过百度和向有学过Python的同学了解了Python.Python这门语言,入门比较简单,它简单易学,生态圈比较强大,涉及的地方 ...
    
			
    9. 
						
  9. python之控制流
			
    https://www.cnblogs.com/evablogs/p/6691776.html 条件判断 简单if语句 1 2 3 4 5 >>>name='lily' >&g ...
    
			
    10. 
						
  10. Visual Studio Code自定义快捷键（eclipse习惯）
			
    左下角设置按钮 -> Keyboard Shortcuts -> keybindings.json. [ { "key": "alt+/", &qu ...
    
			
    11.