CSS实现十二种loading动画效果细说
发布时间：2022-04-20 09:01:43 所属栏目：语言 来源：互联网
导读：Loading效果一般应用在用户需要等待的场景，使用Loading加载动画可以让用户知道正在加载数据，从而提高用户的使用体验。好的Loading动画能够让等待过程不那么无聊，还能很好的抓住用户的眼球。这篇文章就给大家分享一些用CSS实现的Loading加载动画效果，感兴
 Loading效果一般应用在用户需要等待的场景，使用Loading加载动画可以让用户知道正在加载数据，从而提高用户的使用体验。好的Loading动画能够让等待过程不那么无聊，还能很好的抓住用户的眼球。这篇文章就给大家分享一些用CSS实现的Loading加载动画效果，感兴趣的朋友继续往下看吧。 第一种： @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } 解析：定义一个 div元素，设置边长为 40px 背景白色的正方形，然后设置循环翻转动画实现该加载效果动画 perspective 属性定义 3D 元素距视图的距离 第二种： HTML <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> .sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
