打开门样式的加载动画

最新推荐文章于 2021-02-09 10:09:23 发布
最新推荐文章于 2021-02-09 10:09:23 发布
阅读量242 收藏
点赞数
分类专栏： css IT html js 文章标签： 打开门样式的加载动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209114/article/details/95340192
版权
IT 同时被 3 个专栏收录
83 篇文章 2 订阅
订阅专栏
js
46 篇文章 0 订阅
订阅专栏
html
41 篇文章 1 订阅
订阅专栏 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>打开门样式加载动画</title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<style type="text/css">
			/* 加载动画 */
			
			.chromeframe {
				margin: 0.2em 0;
				background: #ccc;
				color: #000;
				padding: 0.2em 0;
			}
			
			#loader-wrapper {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 999999;
			}
			
			#loader {
				display: block;
				position: relative;
				left: 50%;
				top: 38.2%;
				width: 150px;
				height: 150px;
				margin: -75px 0 0 -75px;
				border-radius: 50%;
				border: 3px solid transparent;
				/* COLOR 1 */
				border-top-color: #FFF;
				-webkit-animation: spin 2s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-ms-animation: spin 2s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-moz-animation: spin 2s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-o-animation: spin 2s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				animation: spin 2s linear infinite;
				/* Chrome, Firefox 16+, IE 10+, Opera */
				z-index: 1001;
			}
			
			#loader:before {
				content: "";
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				bottom: 5px;
				border-radius: 50%;
				border: 3px solid transparent;
				/* COLOR 2 */
				border-top-color: #FFF;
				-webkit-animation: spin 3s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-moz-animation: spin 3s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-o-animation: spin 3s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-ms-animation: spin 3s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				animation: spin 3s linear infinite;
				/* Chrome, Firefox 16+, IE 10+, Opera */
			}
			
			#loader:after {
				content: "";
				position: absolute;
				top: 15px;
				left: 15px;
				right: 15px;
				bottom: 15px;
				border-radius: 50%;
				border: 3px solid transparent;
				border-top-color: #FFF;
				/* COLOR 3 */
				-moz-animation: spin 1.5s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-o-animation: spin 1.5s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-ms-animation: spin 1.5s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				-webkit-animation: spin 1.5s linear infinite;
				/* Chrome, Opera 15+, Safari 5+ */
				animation: spin 1.5s linear infinite;
				/* Chrome, Firefox 16+, IE 10+, Opera */
			}
			
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
					/* Chrome, Opera 15+, Safari 3.1+ */
					-ms-transform: rotate(0deg);
					/* IE 9 */
					transform: rotate(0deg);
					/* Firefox 16+, IE 10+, Opera */
				}
				100% {
					-webkit-transform: rotate(360deg);
					/* Chrome, Opera 15+, Safari 3.1+ */
					-ms-transform: rotate(360deg);
					/* IE 9 */
					transform: rotate(360deg);
					/* Firefox 16+, IE 10+, Opera */
				}
			}
			
			@keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
					/* Chrome, Opera 15+, Safari 3.1+ */
					-ms-transform: rotate(0deg);
					/* IE 9 */
					transform: rotate(0deg);
					/* Firefox 16+, IE 10+, Opera */
				}
				100% {
					-webkit-transform: rotate(360deg);
					/* Chrome, Opera 15+, Safari 3.1+ */
					-ms-transform: rotate(360deg);
					/* IE 9 */
					transform: rotate(360deg);
					/* Firefox 16+, IE 10+, Opera */
				}
			}
			
			#loader-wrapper .loader-section {
				position: fixed;
				top: 0;
				width: 51%;
				height: 100%;
				background: #000;
				/* Old browsers */
				z-index: 1000;
				-webkit-transform: translateX(0);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: translateX(0);
				/* IE 9 */
				transform: translateX(0);
				/* Firefox 16+, IE 10+, Opera */
			}
			
			#loader-wrapper .loader-section.section-left {
				left: 0;
			}
			
			#loader-wrapper .loader-section.section-right {
				right: 0;
			}
			/* Loaded */
			
			.loaded #loader-wrapper .loader-section.section-left {
				-webkit-transform: translateX(-100%);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: translateX(-100%);
				/* IE 9 */
				transform: translateX(-100%);
				/* Firefox 16+, IE 10+, Opera */
				-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			}
			
			.loaded #loader-wrapper .loader-section.section-right {
				-webkit-transform: translateX(100%);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: translateX(100%);
				/* IE 9 */
				transform: translateX(100%);
				/* Firefox 16+, IE 10+, Opera */
				-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			}
			
			.loaded #loader {
				opacity: 0;
				-webkit-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;
			}
			
			.loaded #loader-wrapper {
				visibility: hidden;
				-webkit-transform: translateY(-100%);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: translateY(-100%);
				/* IE 9 */
				transform: translateY(-100%);
				/* Firefox 16+, IE 10+, Opera */
				-webkit-transition: all 0.3s 1s ease-out;
				transition: all 0.3s 1s ease-out;
			}
			/* JavaScript Turned Off */
			
			.no-js #loader-wrapper {
				display: none;
			}
			
			.no-js h1 {
				color: #222222;
			}
			
			#loader-wrapper .load_title {
				font-family: 'Open Sans';
				color: #FFF;
				font-size: 19px;
				width: 100%;
				text-align: center;
				z-index: 9999999999999;
				position: absolute;
				top: 60%;
				opacity: 1;
				line-height: 30px;
			}
			
			#loader-wrapper .load_title span {
				font-weight: normal;
				font-style: italic;
				font-size: 13px;
				color: #FFF;
				opacity: 0.5;
			}
		</style>
	</head>

	<body>
		<div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
			<div class="load_title"></div>
		</div>

		<script>
			
			// 等待所有加载
			$(window).load(function() {
				$('#loader-wrapper .load_title').remove();
			});

			$(window).load(function() {
				$('body').addClass('loaded')
				$('#loader-wrapper .load_title').remove();
			});
			
		</script>
	</body>

</html>
QSWQSWQSWQSWQSW
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
实现开门动画效果
chenhuashen123的博客
06-08 676
今天看到一个小动画是一个打开门的效果感觉挺好玩的，自己写了一下
仿微信开门动画
09-11
仿照微信开机引导UI和开门动画的完美实现，和真的一样哦
小程序 简单的由远及近 开门效果
red_paper_zj的博客
02-09 374
html： <view class="container"> <view class="door" animation="{{animationData}}"> <view class="left" animation="{{ani_left}}"></view> <view class="right" animation="{{ani_right}}"></view> </view> </vi
WPF中全局开启或关闭动画效果
林老师的专栏
06-08 7896
公司开发的WPF项目中，要求有这样一个业务：用户可以开启或关闭动画效果。WPF的绚丽之处就是3D、动画、特效等等，给人非常炫的感觉，但是机器配置较差的用户可能需要关闭动画特效。我甚至遇到一个3D特效在显卡不好机器上，导致应用程序崩溃的情况。可见WPF对机器的要求还是比较高的。如果才能做到呢？需要以下几步就能轻松完成。初始状态：鼠标移动到矩形上颜色更改1.建立两个资源字典，分别为Storyboard
css3的transition属性详解
11-21
transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.这个属性一般搭配:hover来使 下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear 复制代码代码如下:div{ background-color:red; transition:background-color 1s linear 0.2s;}div:hover{ background-color:yellow;}<div>思思博士</div> 鼠标没放上去之前: 鼠标放上去0.2s后 的变化过程: 鼠标放上去的最终效果: 看到这里
开门动画特效.zip
07-24
"开门动画" 是一种常见的网页特效，模拟物体或场景像门一样打开的过程，为用户呈现一种揭示或过渡的效果。这种动画可以用来吸引用户的注意力，同时在页面内容完全加载之前提供一种反馈，让用户知道网页正在准备就绪...
HTML5 SVG打开页面动画特效特效代码
03-20
"HTML5 SVG打开页面动画特效特效代码"是利用SVG的特性实现的一种独特的网页加载或过渡效果，它以卷帘式渐变过渡为特点，为用户带来更加生动且吸引人的视觉体验。 在HTML5中，SVG可以通过`<svg>`元素直接内联到文档...
基于jquery+css3实现的13种动感页面加载动画特效源码.zip
11-10
在基于jQuery+CSS3的页面加载动画中，开发者通常会结合两者，利用jQuery触发动画并控制时间，使用CSS3定义动画的视觉样式。以下是一些可能的动画特效： 1. **环形进度条**：通过CSS3的stroke-dasharray和stroke-...
js实现图片推拉门效果代码实例
10-16
这段JavaScript代码的核心是`onmouseover`事件处理函数，当鼠标悬停在某张图片上时，会重置所有图片的位置，然后让当前及之前的图片向左移动，模拟推拉门打开的效果。`translate`变量表示每次移动的距离，即图片宽度...
导航条(滑动门)可以减少网页加载时间
05-19
当用户将鼠标悬停在菜单项上时，通过JavaScript或jQuery动态改变元素的高度，使得隐藏的部分显示出来，呈现出如同门滑动打开的效果。这样，网页在初始加载时只需加载可视区域的内容，减少了HTTP请求的数量，进而加快...
微信小程序动画效果集合
扯文艺的猿的博客
06-11 1万+
一期一期的整，假如以下内容中，有已经无法使用的部分，欢迎指出；假如你有你觉得可以加入特殊效果范围的文章或帖子，或是你有自己制作的特殊效果，欢迎回复分享； 文字跑马灯效果：http://www.wxapp-union.com/portal.php?mod=view&amp;aid=1038 触摸水波涟漪效果：http://www.wxapp-union.com/portal.php?mod=view...
小程序旋转动画
qq_38026437的博客
11-06 1785
做了一个简单的小程序箭头旋转动画效果。 &lt;view class='clist fs26' bindtap='godet'&gt; &lt;view&gt; 项目名称：萌卡纳&lt;/view&gt; &lt;view class='f-r '&gt; {{item.show==true?"收起":"详情"}} &lt;v
小程序中使用动画的四种方式
热门推荐
LANCE的博客
11-27 1万+
既然是前端开发，那么页面的动画必然是一个少不了的东西，下面我们就来研究研究小程序的动画是怎么来实现的 1、利用样式实现小程序动画(用法和css用法相识) wxml 文件 <image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx; position: relative;"...
CSS 加过渡效果transition
Shiny0815的博客
11-26 421
transition:box-shadow0.3s; 给按钮加效果 transition:all0.7s; 给进度条
小程序动画-图片一直旋转
echo_Ae的博客
06-05 6746
实现效果（可能有点bug就是你不能等到你写的定时器时间到了，如果到了你在去点击是没有旋转效果）下面的效果也可以一进页面就可以旋转，我代码有实现。可以看我的代码index.wxml&lt;view class="container"&gt; &lt;image src='/resource/images/1/blueRefresh.png' class='img' animation="{{an...
小程序蓝牙实战（蓝牙开门）
Zhooson的博客
01-10 5020
坑： 单个设备的连接 单个设备连接 ，每次写入数据成功后只需要 wx.closeBLEConnection 执行这个即可 不需要 wx.openBluetoothAdapter 了 多个设备切换连接 每次切换设备连接需要wx.closeBLEConnection 和 wx.closeBluetoothAdapter 需要断开连接 ，并且释放资源 mac地址和UUID ios由于隐私保护的...
在CSS中transition属性详解
cuifuzong3007的博客
11-13 804
transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。 1.tra...
微信小程序开发动感十足的加载动画--都在这里！
weixin_34416649的博客
10-17 839
代码地址如下：http://www.demodashi.com/demo/14242.html 一、前期准备工作 软件环境：微信开发者工具 官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1、基本需求。 实现加载动画 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画） 2、案例目录结构 ...
小程序仿安卓动画滑动效果滑动动画效果实现
a_靖的博客
02-26 1915
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图： 源码 var start_clientY; //记录当前滑动开始的值 var end_clientY; //记录当前滑动结束的值 var animation = wx.createAnimation({ duration: '400' }); //初始化动画 var his...
css加载动画代码示例
最新发布
04-25
当我们需要在网页中展示加载过程时，可以使用CSS加载动画来...然后使用CSS样式设置了加载动画的边框样式、颜色、形状、大小等属性。通过定义名为"spin"的CSS动画，我们让加载动画在2秒内以线性方式无限循环地旋转起来。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值