麻烦大虾看看这个页面是怎么显示内容的

bestxy 2017-11-03 02:31:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" href="dist/bundles/index.css?version=2.11.1">
<style>
.spinner {
width: 60px;
height: 30px;
display: inline-block;
background: rgba(255, 255, 255, 0.85);
padding: 10px 50px 0;
}

.spinner .three-bounce {
position: relative;
text-align: center;
top: 50%;
bottom: 50%;
margin-top: -9px
}

.spinner .three-bounce>div {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100%;
top: 50%;
margin-top: -9px;
background: #aeadba;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.spinner .three-bounce .one {
-webkit-animation-delay: -.32s;
animation-delay: -.32s;
background: rgb(55,137,250);
}

.spinner .three-bounce .two {
-webkit-animation-delay: -.16s;
animation-delay: -.16s;
background: rgb(99,99,99);
}

.spinner .three-bounce .three {
background: rgb(235,67,70);
}

@keyframes bouncedelay {
0%,100%,80% {
transform: scale(0);
-webkit-transform: scale(0)
}

40% {
transform: scale(1);
-webkit-transform: scale(1)
}
}
</style>
</head>
<body>
<div id="appLoading" class="bet-loading" style="position: fixed; width:100%; top: 200px; text-align: center; z-index: 3000;">
<div class="spinner"><div class="three-bounce"><div class="one"></div><div class="two"></div><div class="three"></div></div></div>
</div>
<div id="app"></div>
<div id="gameservice"> </div>
<script src="dist/steal.production.js" env="production" cache-version="2.11.1"></script>
</body>
</html>
...全文
173 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
bestxy 2017-11-03
@霜月枫桥 我用浏览器右键“查看源”看到的是上面的代码,但在某元素上右键“检查元素”,看到的却是下面的内容。请问下面这些代码是怎么嵌入源里的? 是通过这两句吗? <div id="app"></div> <div id="gameservice"> </div> 我想调用其中某个input元素的方法,应该怎么做? 谢谢指教!
  • 打赏
  • 举报
回复
霜月枫桥 2017-11-03
动态效果是在class为three-bounce的div中进行的,代码如下
	<div class="three-bounce">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>
其实one、two、three他们实现的动态效果是一样的,都是通过CSS的animation属性实现的动态效果(楼主可以百度一下,看一下animation的用法),无非one和two设置了延时,one为animation-delay: -.32s; two为animation-delay: -.16s;three没设该值,默认为0 ,前两个值为负值,所以会依次提前执行,从而形成你看到的效果。 动态效果的实现代码如下:
@keyframes bouncedelay {
            0%,100%,80% {
                transform: scale(0);
                -webkit-transform: scale(0)
            }

            40% {
                transform: scale(1);
                -webkit-transform: scale(1)
            }
        }
使用transform属性,控制图形的缩小和恢复。
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-11-03 02:31
社区公告
暂无公告