首页

JS特效

CSS3特效

CSS3球状网页加载动画图标特效

立即下载预览

<头>
<元字符集=“utf-8”>
CSS3球状网页加载动画图标效果
<风格>
*, *:之前, *:之后 {
框大小：边框框；
边距：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 动画

多款CSS3变换实现的网页加载动画代码，CSS3球状网页加载动画图标特效。

免责声明

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

如何熟练运用CSS3特效提升网页的用户体验

09 Sep 2023

如何熟练运用CSS3特效提升网页的用户体验随着互联网的发展，网页设计和用户体验成为了网站开发中的重要环节。而CSS3特效的应用，可以为网页增添动感和视觉效果，提升用户体验。本文将介绍几种常见的CSS3特效及其代码示例，帮助开发者更加熟练地运用CSS3特效，提升网页的用户体验。过渡效果（Transition）过渡效果是CSS3中最基本的特效之一，通过改变某个属