Animate與transform的使用

時間 2019-11-11

標籤 animate transform 使用简体版

原文原文鏈接

Animate是用css給前端加載動畫的效果：css

網址：https://daneden.github.io/animate.css/html

<!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是指以起點做爲座標。git

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

textarea 禁止拉伸：resize:nonegithub

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。