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

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>

...全文

210 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

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属性，控制图形的缩小和恢复。