30种CSS3炫酷页面预加载loading动画特效源码.zip资源-CSDN文库

共47个文件

html：31个

css：4个

eot：2个

版权申诉

前段代码

asp

183 浏览量 2022-10-31 01:38:55 上传评论收藏 426KB ZIP 举报

在网页设计中，预加载（loading）动画是一个重要的组成部分，它在用户等待页面完全加载时提供视觉反馈，提升用户体验。本资源"30种CSS3炫酷页面预加载loading动画特效源码.zip"包含了30个不同的CSS3实现的加载动画效果，这些效果既美观又高效，能够为你的网站增添独特的魅力。 CSS3是 Cascading Style Sheets 的第三版，它是网页样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS3引入了许多新特性，如选择器、伪类、边框与背景、多列布局、过渡（transitions）、动画（animations）等，使得网页设计更加灵活且富有表现力。这些预加载动画利用了CSS3的动画特性，特别是`@keyframes`规则，通过定义动画的起始和结束状态来创建动态效果。例如，一个简单的旋转动画可以通过以下代码实现： ```css @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 在HTML中应用这个动画： ```html <div class="loader"></div> ``` 然后在CSS中设置元素的动画属性： ```css .loader { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: #333; border-radius: 50%; animation: rotate 2s linear infinite; } ``` 这将创建一个旋转的加载指示器。此外，CSS3的过渡（transition）特性也常用于预加载动画，它允许元素在不同状态间平滑地改变。例如，一个简单的淡入淡出效果可以这样实现： ```css .loading { opacity: 0; transition: opacity 1s ease-in-out; } .loading.active { opacity: 1; } ``` 当`.loading`类被添加到元素上时，元素会淡入显示。在这些预加载动画中，JavaScript可能用于控制动画的触发和停止，例如监听页面加载事件。ASP则可能是后端服务器端脚本语言，用于处理动态内容生成，但在这个特定资源中，主要关注的是前端CSS3动画。这些预加载动画适用于各种类型的网站，无论是电子商务、博客还是个人作品集，都可以根据网站风格选择合适的加载动画，提升用户的第一印象。由于文件列表中只有一个文件名，无法进一步详细分析每个动画的具体实现，但可以肯定的是，这些源码将提供丰富的实践和学习素材，帮助开发者掌握CSS3动画的使用技巧。

资源推荐

资源详情

资源评论

收起资源包目录

30种CSS3炫酷页面预加载loading动画特效源码.zip （47个子文件）

132677714835765436

CSS3_loading30

css

Icomoon

icomoon.woff 103KB

icomoon.svg 361KB

icomoon.eot 75KB

style.css 31KB

icomoon.ttf 75KB

default.css 6KB

animate.css 74KB

normalize.css 2KB

demo7.html 8KB

2.jpg 23KB

1.jpg 24KB

demo24.html 5KB

demo27.html 5KB

demo12.html 8KB

demo23.html 4KB

demo17.html 6KB

demo2.html 8KB

demo19.html 6KB

demo26.html 5KB

demo14.html 5KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

demo8.html 6KB

demo1.html 4KB

demo13.html 6KB

index.html 3KB

demo11.html 5KB

jquery-2.0.2.min.js 81KB

main.js 152B

demo5.html 6KB

demo4.html 9KB

demo16.html 6KB

demo25.html 5KB

demo15.html 7KB

demo6.html 9KB

demo28.html 5KB

demo3.html 7KB

demo20.html 6KB

demo22.html 4KB

demo18.html 5KB

demo30.html 21KB

demo10.html 7KB

demo9.html 8KB

demo21.html 4KB

demo29.html 8KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>30种CSS3炫酷页面预加载loading动画特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="css/Icomoon/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <style> #loading{ background-color: #d64700; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; } #loading-center{ width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 100px; width: 100px; margin-top: -50px; margin-left: -50px; } .object{ position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #FFF; } .object:nth-child(25){ bottom: 0px; left: 80px; -webkit-animation: animate_25 3s infinite ease-in-out; animation: animate_25 3s infinite ease-in-out; } .object:nth-child(24){ bottom: 0px; left: 60px; -webkit-animation: animate_24 3s infinite ease-in-out; animation: animate_24 3s infinite ease-in-out; } .object:nth-child(23){ bottom: 0px; left: 40px; -webkit-animation: animate_23 3s infinite ease-in-out; animation: animate_23 3s infinite ease-in-out; } .object:nth-child(22){ bottom: 0px; left: 20px; -webkit-animation: animate_22 3s infinite ease-in-out; animation: animate_22 3s infinite ease-in-out; } .object:nth-child(21){ bottom: 0px; left: 0px; -webkit-animation: animate_21 3s infinite ease-in-out; animation: animate_21 3s infinite ease-in-out; } .object:nth-child(20){ bottom: 0px; left: 70px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_20 3s infinite ease-in-out; animation: animate_20 3s infinite ease-in-out; } .object:nth-child(19){ bottom: 0px; left: 50px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_19 3s infinite ease-in-out; animation: animate_19 3s infinite ease-in-out; } .object:nth-child(18){ bottom: 0px; left: 30px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_18 3s infinite ease-in-out; animation: animate_18 3s infinite ease-in-out; } .object:nth-child(17){ bottom: 0px; left: 10px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_17 3s infinite ease-in-out; animation: animate_17 3s infinite ease-in-out; } .object:nth-child(16){ bottom: 20px; left: 70px; -webkit-animation: animate_16 3s infinite ease-in-out; animation: animate_16 3s infinite ease-in-out; } .object:nth-child(15){ bottom: 20px; left: 50px; -webkit-animation: animate_15 3s infinite ease-in-out; animation: animate_15 3s infinite ease-in-out; } .object:nth-child(14){ bottom: 20px; left: 30px; -webkit-animation: animate_14 3s infinite ease-in-out; animation: animate_14 3s infinite ease-in-out; } .object:nth-child(13){ bottom: 20px; left: 10px; -webkit-animation: animate_13 3s infinite ease-in-out; animation: animate_13 3s infinite ease-in-out; } .object:nth-child(12){ bottom: 20px; left: 60px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_12 3s infinite ease-in-out; animation: animate_12 3s infinite ease-in-out; } .object:nth-child(11){ bottom: 20px; left: 40px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_11 3s infinite ease-in-out; animation: animate_11 3s infinite ease-in-out; } .object:nth-child(10){ bottom: 20px; left: 20px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_10 3s infinite ease-in-out; animation: animate_10 3s infinite ease-in-out; } .object:nth-child(9){ bottom: 40px; left: 60px; -webkit-animation: animate_9 3s infinite ease-in-out; animation: animate_9 3s infinite ease-in-out; } .object:nth-child(8){ bottom: 40px; left: 40px; -webkit-animation: animate_8 3s infinite ease-in-out; animation: animate_8 3s infinite ease-in-out; } .object:nth-child(7){ bottom: 40px; left: 20px; -webkit-animation: animate_7 3s infinite ease-in-out; animation: animate_7 3s infinite ease-in-out; } .object:nth-child(6){ bottom: 40px; left: 50px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_6 3s infinite ease-in-out; animation: animate_6 3s infinite ease-in-out; } .object:nth-child(5){ bottom: 40px; left: 30px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_5 3s infinite ease-in-out; animation: animate_5 3s infinite ease-in-out; } .object:nth-child(4){ bottom: 60px; left: 50px; -webkit-animation: animate_4 3s infinite ease-in-out; animation: animate_4 3s infinite ease-in-out; } .object:nth-child(3){ bottom: 60px; left: 30px; -webkit-animation: animate_3 3s infinite ease-in-out; animation: animate_3 3s infinite ease-in-out; } .object:nth-child(2){ bottom: 60px; left: 40px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation: animate_2 3s infinite ease-in-out; animation: animate_2 3s infinite ease-in-out; } .object:nth-child(1){ bottom: 80px; left: 40px; -webkit-animation: animate_1 3s infinite ease-in-out; animation: animate_1 3s infinite ease-in-out; } @-webkit-keyframes animate_1 { 50% { -ms-transform: translate(0,-100px) rotate(180deg); -webkit-transform: translate(0,-100px) rotate(180deg); transform: translate(0,-100px) rotate(180deg); } } @keyframes animate_1 { 50% { -ms-transform: translate(0,-100px) rotate(180deg); -webkit-transform: translate(0,-100px) rotate(180deg); transform: translate(0,-100px) rotate(180deg); } } @-webkit-keyframes animate_2 { 50% { -ms-transform: translate(0,-80px) rotate(180deg); -webkit-transform: translate(0,-80px) rotate(180deg); transform: translate(0,-80px) rotate(180deg); } } @keyframes animate_2 { 50% { -ms-transform: translate(0,-80px) rotate(180deg); -webkit-transform: translate(0,-80px) rotate(180deg); transform: translate(0,-80px) rotate(180deg); } } @-webkit-keyframes animate_3 { 50% { -ms-transform: translate(-100px,-100px) rotate(180deg); -webkit-transform: translate(-100px,-100px) rotate(180deg); transform: translate(-100px,-100px) rotate(180deg); } } @keyframes animate_3 { 50% { -ms-transform: translate(-100px,-100px) rotate(180deg); -webkit-transform:translate(-100px,-100px) rotate(180deg); transform: translate(-100px,-100px) rotate(180deg);

评论收藏

内容反馈

版权申诉