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. 💈 线程间互访助手类 (EN)
			
    Conmajia © 2012, 2018 Published on August 5th, 2012 Updated on February 2nd, 2019 Introduction While ...
    
			
    2. 
						
  2. DSAPI WIN7风格
			
    在Winform项目中,有时需要将UI变成适应Vista/Windows7/8/10的风格,通过"选用"以下代码来使你的UI支持系统主题渲染. 注:该功能不支持XP,建议使用DS控 ...
    
			
    3. 
						
  3. Vue-zTree
			
    在vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入: import "./js/jquery-3.3.1.min.js";import &quo ...
    
			
    4. 
						
  4. vue 模板template
			
    入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
    
			
    5. 
						
  5. 关于elementui表单数字校验踩坑记
			
    需求:1.输入类型是数字.2.数字大小有限制.3.非必填 做法: <el-form-item label="熟悉程度" prop="averageCaseRunTi ...
    
			
    6. 
						
  6. Hacking Bsides Vancouver 2018 walkthrough
			
    概述: Name: BSides Vancouver: 2018 (Workshop) Date release: 21 Mar 2018 Author: abatchy Series: BSides ...
    
			
    7. 
						
  7. Python机器学习实践：决策树判别汽车金融违约用户
			
    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 转自 | 法纳斯特(公众号ID:walker398) 作者 | 小F 决策树呈树形结构,是一种基本的回 ...
    
			
    8. 
						
  8. C#实现多级子目录Zip压缩解压实例
			
          参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩,类似winrar,可以选择 ...
    
			
    9. 
						
  9. 工具资源系列之给虚拟机装个windows
			
    前面我们介绍了如何在 mac 宿主机安装 VMware 虚拟机软件,本节我们将继续介绍如何给虚拟机安装镜像,切换不同的操作系统. VMware 软件是容器,镜像是内核,这里的镜像指的是操作系统. 下载 ...
    
			
    10. 
						
  10. hbase 预分区与自动分区
			
    我们知道,HBASE在创建表的时候,会自动为表分配一个Region,当一个Region过大达到默认的阈值时(默认10GB大小),HBase中该Region将会进行split,分裂为2个Region,以 ...
    
			
    11.