<头>
<元字符集=“utf-8”>

<风格>
*, *:之前, *:之后 {
  框大小：边框框；
  边距：0；
  填充：0;
}
：根，html，正文{
  字体系列：'Poiret One'、'Open Sans'、'Helvetica Neue'、'Helvetica'、'Arial'、sans-serif;
  背景：#222;
  白颜色;＃＃＃ }
h1 {
  文本对齐：居中；
  边距：1rem 自动 2rem;
  字体粗细：正常；
}
p {
  保证金：1rem；
}
。排 {＃＃＃   宽度：80%；
  高度：150px；
  边距：2rem 自动；
}
。细胞 {＃＃＃   显示：内联块；
  宽度：49%；
  文本对齐：居中；
}
。圆圈 {＃＃＃   显示：内联块；
  宽度：100px；
  高度：100px；
  边界半径：50%；
  背景：白色烟雾；
  框阴影：4px -40px 60px 5px rgb(26, 117, 206) 插图;
}
。正方形 {＃＃＃   显示：内联块；
  宽度：100px；
  高度：100px；
  边框半径：20px;
  背景：白色烟雾；
  框阴影：4px -40px 60px 5px rgb(26, 117, 206) 插图;
}

.loader {
  背景: 线性渐变(向右, rgb(22, 113, 202) 50%, 透明 50%);
  动画：旋转 1s 无限线性；
}
.loader:在{
之前   显示：块；
  内容： '';＃＃＃   位置：相对；
  顶部：50%；
  左：50%；
  变换：翻译(-50%, -50%);
  宽度：90px；
  高度：90 像素；
  背景：#222;
  边界半径：50%；
}

。明胶 {＃＃＃   动画：明胶0.5s无限；
}
@keyframes明胶{
  从, 到 { 变换: 缩放(1, 1); }
  25% { 变换：缩放（0.9，1.1）； }
  50% { 变换：缩放（1.1，0.9）； }
  75% { 变换：缩放（0.95，1.05）； }
}

。旋转 {＃＃＃   动画：旋转 1s 无限线性；
}
@关键帧旋转{
  来自 { 变换：旋转（0deg）； }
  到 { 变换：旋转（360deg）； }
}

.弹性旋转{
  动画：elastic-spin 1s 无限轻松；
}
@keyframes 弹性旋转 {
  来自 { 变换：旋转（0deg）； }
  到 { 变换：旋转（720deg）； }
}

.脉冲{
  动画：脉冲 1 秒无限缓入缓出交替；
}
@关键帧脉冲{
  来自 { 变换：比例（0.8）； }
  到 { 变换：缩放（1.2）； }
}

。闪光 {＃＃＃  动画：闪烁 500ms 缓和无限交替；
}
@关键帧闪光{
来自 { 不透明度：1; }
到{不透明度：0； }
}

。你好呀 {＃＃＃   动画：这里 1s 轻松无限；
}
@这里的关键帧{
  30% { 变换：缩放（1.2）； }
  40%, 60% { 变换: 旋转(-20deg) 缩放(1.2); }
  50% { 变换：旋转（20deg） 缩放（1.2）; }
  70% { 变换：旋转（0deg） 缩放（1.2）; }
  100% { 变换：缩放（1）； }
}

。生长 {＃＃＃   动画：增长 2s 轻松无限；
}
@关键帧增长{
  来自 { 变换：比例（0）； }
  到 { 变换：缩放（1）； }
}

。淡入 {＃＃＃   动画：淡入 2s 线性无限；
}
@关键帧淡入{
  来自{ 不透明度：0; }
  至 { 不透明度：1; }
}

。消退 {＃＃＃   动画：淡出 2s 线性无限；
}
@关键帧淡出{
  来自 { 不透明度：1; }
  到{不透明度：0； }
}

.bounce {
  动画：反弹 2s 缓和无限；
}
@关键帧反弹{
    70% { 变换:translateY(0%); }
    80% { 变换:translateY(-15%); }
    90% { 变换：translateY(0%); }
    95% { 变换:translateY(-7%); }
    97% { 变换:translateY(0%); }
    99% { 变换：translateY(-3%); }
    100% { 变换:translateY(0); }
}

.bounce2 {
  动画：bounce2 2s 轻松无限；
}
@关键帧反弹2 {
0%、20%、50%、80%、100% {变换：translateY(0);}
40% {变换：translateY(-30px);}
60% {变换：translateY(-15px);}
}

.摇动{
  动画：摇动2秒轻松无限；
}
@关键帧摇动{
0%, 100% {变换：translateX(0);}
10%、30%、50%、70%、90% {变换：translateX(-10px);}
20%、40%、60%、80% {变换：translateX(10px);}
}

。翻动 {＃＃＃ 背面可见性：可见！重要；
动画：翻转 2s 轻松无限；
}
@关键帧翻转{
0% {
# 变换：透视（400px）旋转Y（0）;
动画计时功能：ease-out；
}
40% {
# 变换：透视（400px）translateZ（150px）rotateY（170deg）;
动画计时功能：ease-out；
}
50% {
# 变换：透视（400px）translateZ（150px）rotateY（190deg）scale（1）;
动画计时功能：ease-in;
}
80% {
# 变换：透视（400px）旋转Y（360deg）缩放（.95）;
动画计时功能：ease-in;
}
100% {
# 变换：透视（400px）缩放（1）;
动画计时功能：ease-in;
}
}

。摇摆 {＃＃＃ 变换原点：顶部中心；
动画：摇摆 2s 轻松无限；
}
@关键帧摆动{
20% { 变换：旋转（15 度）； }
40% { 变换：旋转(-10deg); }
60% { 变换：旋转（5deg）； }
80% { 变换：旋转(-5deg); }
100% { 变换：旋转（0deg）； }
}

.摆动{
  动画：摆动 2s 轻松无限；
}
@关键帧摆动{
  0% { 变换：translateX(0%); }
  15% { 变换：translateX(-25%) 旋转(-5deg); }
  30% { 变换：translateX(20%) 旋转(3deg); }
  45% { 变换：translateX(-15%) 旋转(-3deg); }
  60% { 变换：translateX(10%) 旋转(2deg); }
  75% { 变换：translateX(-5%) 旋转(-1deg); }
  100% { 变换：translateX(0%); }
}

.淡入淡出{
  动画：淡入 2s 缓动无限；
}
@关键帧淡入{
  0% {
#     不透明度：0；
    变换：translateY(-20px);
  }
  100% {
#     不透明度：1；
    变换：translateY(0);
  }
}

.淡入左{
  动画：淡入左 2s 缓动无限；
}
@关键帧向左淡入{
  0% {
#     不透明度：0；
    变换：translateX(-20px);
  }
  100% {
#     不透明度：1；
    变换：translateX(0);
  }
}

.淡出-向下 {
  动画：淡出-向下 2s 轻松无限；
}
@关键帧淡出向下{
  0% {
#     不透明度：1；
    变换：translateY(0);
  }
  100% {
#     不透明度：0；
    变换：translateY(20px);
  }
}

.淡出右{
  动画：淡出右2秒轻松无限；
}
@关键帧右淡出{
  0% {
#     不透明度：1；
    变换：translateX(0);
  }
  100% {
#     不透明度：0；
    变换：translateX(20px);
  }
}

.bounce-in {
  动画：反弹 2 秒轻松无限；
}
@关键帧弹入{
  0% {
#     不透明度：0；
    变换：缩放(.3);
  }
  50% {
#     不透明度：1；
    变换：比例（1.05）；
  }
  70% { 变换：缩放(.9); }
  100% { 变换：缩放（1）； }
}

.bounce-in-right {
  动画：右弹跳 2 秒轻松无限；
}
@关键帧向右反弹{
  0% {
#    不透明度：0；
    变换：translateX(2000px);
  }
  60% {
#     不透明度：1；
    变换：translateX(-30px);
  }
  80% { 变换：translateX(10px); }
  100% { 变换：translateX(0); }
}

.bounce-out {
  动画：反弹 2 秒轻松无限；
}
@关键帧跳出{
  0% { 变换：缩放(1); }
  25% { 变换：缩放（.95）； }
  50% {
#     不透明度：1；
    变换：比例（1.1）；
  }
  100% {
#     不透明度：0；
    变换：缩放(.3);
  } 
}

.bounce-out-down {
  动画：bounce-out-down 2s 缓动无限；
}
@keyframes 弹跳向下 {
  0% { 变换：translateY(0); }
  20% {
#     不透明度：1；
    变换：translateY(-20px);
  }
  100% {
#     不透明度：0；
    变换：translateY(20px);
  }
}

.向左下旋转{
  动画：向左旋转 2s 缓动无限；
}
@关键帧左下旋转{
  0% {
#     变换原点：左下；
    变换：旋转(-90deg);
    不透明度：0；
  }
  100% {
#     变换原点：左下；
    变换：旋转(0);
    不透明度：1；
  }
}

.向左旋转{
  动画：左上旋转 2s 缓动无限；
}
@关键帧左上旋转{
  0% {
#     变换原点：左下；
    变换：旋转(90deg);
    不透明度：0；
  }
  100% {
#     变换原点：左下；
    变换：旋转(0);
    不透明度：1；
  }
}

.铰链{
  动画：铰链 2s 轻松无限；
}
@keyframes铰链{
  0% { 变换：旋转(0);变换原点：左上角；动画计时功能：缓入缓出； }  
  20%, 60% { 变换: 旋转(80deg);变换原点：左上角；动画计时功能：缓入缓出； }  
  40% { 变换：旋转(60deg);变换原点：左上角；动画计时功能：缓入缓出； } 
  80% { 变换: 旋转(60deg) 平移Y(0);不透明度：1；变换原点：左上角；动画计时功能：缓入缓出； } 
  100% { 变换：translateY(700px);不透明度：0； }
}

.滚入{
  动画：滚入 2 秒轻松无限；
}
@关键帧滚入{
  0% {
#     不透明度：0；
    变换：translateX(-100%) 旋转(-120deg);
  }
  100% {
#     不透明度：1；
    变换：translateX(0px) 旋转(0deg);
  }
}

。推出 {＃＃＃   动画：推出 2 秒轻松无限；
}
@关键帧推出{
    0% {
#     不透明度：1；
    变换：translateX(0px) 旋转(0deg);
  }
  100% {
#     不透明度：0；
    变换：translateX(100%) 旋转(120deg);
  }
}
</风格>

</头>

CSS 动画

本站声明

本站所有资源均由网友贡献发布，或转载各大下载站。请自行检查软件的完整性！本网站所有资源仅供学习和参考。请勿用于商业用途，否则造成的一切后果由您自行负责！如有侵权，请联系我们删除下架。联系方式：admin@php.cn