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. 关于C# 中的布尔运算符 "&" "|”  与 其类似的条件布尔运算符 "&&" "||" 区别说明。
			
    运算符使用说明如下:  分隔符 ———————————————————————————— 分隔符 ———————————————————————————— 上述两个运算符的结果与&和 | 完全 ...
    
			
    2. 
						
  2. Spring Boot Security 详解
			
    简介 Spring Security,这是一种基于 Spring AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权. 工作 ...
    
			
    3. 
						
  3. Django之随机图形验证码
			
    实现效果:点击右边图片验证码会变 前端代码: <div class="container"> <div class="row"> < ...
    
			
    4. 
						
  4. CSS 三条横线等分
			
    .header_qian { width: 1.5rem; height: 1.5rem; background: rgba(250, 250, 250,0.7); border-radius: 50 ...
    
			
    5. 
						
  5. Nano Server速记
			
    入门参考https://docs.microsoft.com/zh-cn/windows-server/get-started/nano-server-quick-start 1.创建VHD Impo ...
    
			
    6. 
						
  6. [算法&数据结构]深度优先搜索(Depth First Search)
			
    深度优先 搜索(DFS, Depth First Search) 从一个顶点v出发,首先将v标记为已遍历的顶点,然后选择一个邻接于v的尚未遍历的顶点u,如果u不存在,本次搜素终止.如果u存在,那么从u ...
    
			
    7. 
						
  7. PHP下CodeIgniter框架连接读取MS Access数据库文件
			
    cI用的是3.0版本,测试用的access为.mdb文件,php要读取Access数据库有两种驱动,一种的odbc,一种是pdo_odbc,两种都可以链接,但是一般会更推荐pdo_odbc, 要想ph ...
    
			
    8. 
						
  8. NPM -- 初探--01
			
    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...
    
			
    9. 
						
  9. vue（3）—— vue的全局组件、局部组件
			
    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
    
			
    10. 
						
  10. 每日PA -2019年1月帖-每天更新
			
    开篇 "每日PA"有什么亮点?
    
			
    11.