让老司机带你用纯css制作浮动加载动画,让基础躁起来

  • 时间:2018-11-07 23:19 作者:吐泡泡鱼 来源:吐泡泡鱼 阅读:191
  • 扫一扫,手机访问
摘要:这是用纯css来写的一个效果图,动画效果还是挺有意思的哦~很多初学者小伙伴都以为css只要要会那么少量就ok了,很简单,其实css还是很多你所不知道的内容哦。分享之前还是要推荐一下小编的web前台学习群:121404239,有技术知识点分享,还有小编整理好的web前台资料和教程哦!html代码:cs

让老司机带你用纯css制作浮动加载动画,让基础躁起来

这是用纯css来写的一个效果图,动画效果还是挺有意思的哦~

很多初学者小伙伴都以为css只要要会那么少量就ok了,很简单,其实css还是很多你所不知道的内容哦。

分享之前还是要推荐一下小编的web前台学习群:121404239,有技术知识点分享,还有小编整理好的web前台资料和教程哦!

html代码:

css代码:

@-webkit-keyframes mainAnimation {

0% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

40% {

width: 150px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(0deg);

transform: translateX(-50px) translateY(0px) rotate(0deg);

}

60% {

width: 150px;

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

-webkit-transform: translateX(-150px) translateY(0px) rotate(90deg);

transform: translateX(-150px) translateY(0px) rotate(90deg);

}

80% {

width: 50px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(90deg);

transform: translateX(-25px) translateY(0px) rotate(90deg);

}

100% {

width: 50px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(90deg);

transform: translateX(-50px) translateY(0px) rotate(90deg);

}

}

@keyframes mainAnimation {

0% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

40% {

width: 150px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(0deg);

transform: translateX(-50px) translateY(0px) rotate(0deg);

}

60% {

width: 150px;

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

-webkit-transform: translateX(-150px) translateY(0px) rotate(90deg);

transform: translateX(-150px) translateY(0px) rotate(90deg);

}

80% {

width: 50px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(90deg);

transform: translateX(-25px) translateY(0px) rotate(90deg);

}

100% {

width: 50px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(90deg);

transform: translateX(-50px) translateY(0px) rotate(90deg);

}

}

@-webkit-keyframes secundaryAnimation {

0% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

40% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

60% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

80% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

100% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

}

@keyframes secundaryAnimation {

0% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

40% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

60% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

80% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

100% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

}

@-webkit-keyframes shadowAnimation {

0% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

20% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

40% {

width: 200px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

60% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

80% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

100% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

}

@keyframes shadowAnimation {

0% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

20% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

40% {

width: 200px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

60% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

80% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

100% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

}

@-webkit-keyframes float {

0% {

top: 50%;

}

50% {

top: 51%;

}

100% {

top: 50%;

}

}

@keyframes float {

0% {

top: 50%;

}

50% {

top: 51%;

}

100% {

top: 50%;

}

}

html, body {

height: 100%;

}

body {

position: relative;

background: #99d2e4;

background: linear-gradient(135deg, #99d2e4 0%, #ffd4da 100%);

}

.loader {

position: absolute;

width: 50px;

height: 50px;

top: 50%;

left: 50%;

margin-top: -25px;

margin-left: -25px;

background-color: #FFF5A5;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;

animation: mainAnimation 2.6s ease 0s infinite forwards;

z-index: 2;

}

.loader:after {

content: '';

display: inline-block;

position: absolute;

width: 50px;

height: 50px;

top: 0;

left: -50px;

background-color: #FFF5A5;

-webkit-transform-origin: top right;

transform-origin: top right;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;

animation: secundaryAnimation 2.6s ease 0s infinite forwards;

}

.shadow {

position: absolute;

width: 100px;

height: 10px;

top: 50%;

left: 50%;

margin-top: 50px;

margin-left: -75px;

border-radius: 50%;

background-color: #95a5a6;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;

animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;

z-index: 1;

}

.logo {

position: absolute;

bottom: 20px;

left: 50%;

width: 42px;

height: 42px;

padding: 12px 5px;

margin-left: -21px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

background-color: white;

border-radius: 50%;

-webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.logo:hover {

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

.logo img {

width: 100%;

height: auto;

margin: 0 auto;

}

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习Web前端想要做到事半功倍,只要掌握好这3点(2019-08-23 10:37)
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部