码迷,mamicode.com
首页 > 其他好文 > 详细

Animate与transform的使用

时间:2018-11-11 23:34:29      阅读:492      评论:0      收藏:0      [点我收藏+]

标签:style   request   title   alt   one   代码   效果   get   init   

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>
View Code

在给代码加载动态时候,需要在它前面加入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)
View Code

 

 

Animate与transform的使用

标签:style   request   title   alt   one   代码   效果   get   init   

原文地址:https://www.cnblogs.com/shangjunnihao/p/9943529.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!