邮件html动画,CSS3 邮件发送/消息发送的动画

这篇博客详细介绍了如何使用CSS实现一个容器元素的加载发送状态动画。内容包括设置.container的绝对定位,以及.border和.line系列类的动画关键帧,通过@keyframes规则创建动态的边框和线条变化效果,呈现了一个视觉上吸引人的加载过程。
摘要由CSDN通过智能技术生成

CSS

语言:

CSSSCSS

确定

.container {

height: 50px;

width: 40px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

.container::after {

content: 'Sending';

color: #007298;

font-weight: 700;

position: absolute;

bottom: -50px;

left: -10px;

}

.box {

position: relative;

height: 50px;

width: 40px;

animation: box 5s infinite linear;

}

.border {

background: #007298;

position: absolute;

}

.border.one {

height: 4px;

top: 0;

left: 0;

animation: border-one 5s infinite linear;

}

.border.two {

top: 0;

right: 0;

height: 100%;

width: 4px;

animation: border-two 5s infinite linear;

}

.border.three {

bottom: 0;

right: 0;

height: 4px;

width: 100%;

animation: border-three 5s infinite linear;

}

.border.four {

bottom: 0;

left: 0;

height: 100%;

width: 4px;

animation: border-four 5s infinite linear;

}

.line {

height: 4px;

background: #007298;

position: absolute;

width: 0%;

left: 25%;

}

.line.one {

top: 25%;

width: 0%;

animation: line-one 5s infinite linear;

}

.line.two {

top: 45%;

animation: line-two 5s infinite linear;

}

.line.three {

top: 65%;

animation: line-three 5s infinite linear;

}

@keyframes border-one {

0% {

width: 0;

}

10% {

width: 100%;

}

100% {

width: 100%;

}

}

@keyframes border-two {

0% {

height: 0;

}

10% {

height: 0%;

}

20% {

height: 100%;

}

100% {

height: 100%;

}

}

@keyframes border-three {

0% {

width: 0;

}

20% {

width: 0%;

}

30% {

width: 100%;

}

100% {

width: 100%;

}

}

@keyframes border-four {

0% {

height: 0;

}

30% {

height: 0%;

}

40% {

height: 100%;

}

100% {

height: 100%;

}

}

@keyframes line-one {

0% {

left: 25%;

width: 0;

}

40% {

left: 25%;

width: 0%;

}

43% {

left: 25%;

width: 50%;

}

52% {

left: 25%;

width: 50%;

}

54% {

left: 25%;

width: 0%;

}

55% {

right: 25%;

left: auto;

}

63% {

width: 10%;

right: 25%;

left: auto;

}

100% {

width: 10%;

right: 25%;

left: auto;

}

}

@keyframes line-two {

0% {

width: 0;

}

42% {

width: 0%;

}

45% {

width: 50%;

}

53% {

width: 50%;

}

54% {

width: 0%;

}

60% {

width: 50%;

}

100% {

width: 50%;

}

}

@keyframes line-three {

0% {

width: 0;

}

45% {

width: 0%;

}

48% {

width: 50%;

}

51% {

width: 50%;

}

52% {

width: 0%;

}

100% {

width: 0%;

}

}

@keyframes box {

0% {

opacity: 1;

margin-left: 0px;

height: 50px;

width: 40px;

}

55% {

margin-left: 0px;

height: 50px;

width: 40px;

}

60% {

margin-left: 0px;

height: 35px;

width: 50px;

}

74% {

msthin-left: 0;

}

80% {

margin-left: -50px;

opacity: 1;

}

90% {

height: 35px;

width: 50px;

margin-left: 50px;

opacity: 0;

}

100% {

opacity: 0;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值