Animate與transform的使用


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

 textarea 禁止拉伸:resize:none

 

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM