index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>跳动的小球</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"Microsoft Yahei";}
body{
overflow: hidden;
}
#box{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: radial-gradient(#ff0,#f00);
border-radius: 50%;
}
.shadow{
position: absolute;
width: 50px;
height: 50px;
background: pink;
border-radius: 50%;
transform: scale(1);
opacity: 1;
animation: hide .5s 1;
animation-fill-mode: forwards;
}
@keyframes hide {
from{transform: scale(1);opacity: 1}
to{transform: scale(0);opacity: 0}
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
(function(){
//获取节点
let oBox = document.getElementById("box");
//提前计算好最大值限制
let maxH = document.documentElement.clientHeight - 50,
maxW = document.documentElement.clientWidth - 50;
//监听resize，改变maxH,maxW
window.onresize = function(){
maxH = document.documentElement.clientHeight - 50;
maxW = document.documentElement.clientWidth - 50;
};
//提前定义好，水平方向的速度 和 垂直方向的速度
let Vx = 20,Vy = 8;
(function m(){
//先计算球即将要到达的位置
let left = oBox.offsetLeft + Vx,
top = oBox.offsetTop + Vy;
//做边界判断
if ( left >= maxW ){
left = maxW;
Vx = -Vx;
}
if (top >= maxH){
top = maxH;
Vy = -Vy;
}
if (left <= 0){
left = 0;
Vx = -Vx;
}
if(top <= 0){
top = 0;
Vy = -Vy;
}
//改变样式
oBox.style.left = left + 'px';
oBox.style.top = top + 'px';
//每次帧动画时创建一个相同大小的球
createShadow(left,top);
requestAnimationFrame(m);
})();
//阴影盒子的生产
function createShadow(left,top){
let div = document.createElement("div");
div.classList.add("shadow");
div.style.cssText = `left:${left}px;top:${top}px;`;
document.body.appendChild(div);
setTimeout(()=>{
document.body.removeChild(div);
div = null;
},1000)
}
})();
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>吃豆人</title>
<style type="text/css">
body{
background-color: #000;
}
.box{
position: relative;
width: 200px;height: 200px;
background-color: transparent;
margin-top: 100px;
border-radius: 50%;
box-shadow: 300px 0 0 -80px #fff,
450px 0 0 -80px #fff,
600px 0 0 -80px #fff,
750px 0 0 -80px #fff,
900px 0 0 -80px #fff,
1050px 0 0 -80px #fff;
animation: ball-move .8s linear infinite;
}
.box i{
position: absolute;
top: 30px;left: 210px;
width: 30px;height: 30px;
background-color: #000;
border-radius: 50%;
}
.box::before,.box::after{
content: "";
display: block;
width: 200px;height: 100px;
margin-left: 100px;
background-color: #ff0;
}
.box::before{
border-radius: 100px 100px 0 0;
animation: top-ratate 1s linear infinite;
}
.box::after{
border-radius:0 0 100px 100px;
animation: bottom-rotate 1s linear infinite;
}
@keyframes top-ratate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-30deg);
}
100%{
transform: rotate(0deg);
}
}
/*嘴巴张开的角度*/
@keyframes bottom-rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(30deg);
}
100%{
transform: rotate(0deg);
}
}
/*豆豆的移动效果*/
@keyframes ball-move{
100%{
box-shadow: 150px 0 0 -80px #fff,
300px 0 0 -80px #fff,
450px 0 0 -80px #fff,
600px 0 0 -80px #fff,
750px 0 0 -80px #fff,
900px 0 0 -80px #fff;
}
}
</style>
</head>
<body>
<div class="box">
<i></i>
</div>
</body>
</html>
index.html
<!-- 注释：用于代码的解释 快捷键Ctrl+？ -->
<!-- 声明该文档是html5版本的类型 -->
<!DOCTYPE html>
<!-- 双标签：有头有尾，并且尾巴内会有一个关闭符：/ -->
<!-- 该文档的根元素（根节点） -->
<html lang="en">
<!-- 头部标签 -->
<head>
<!-- 单标签（也称空标签）：有头没有尾，结尾会有一个关闭符，可写可不写 -->
<!-- charset="UTF-8"：声明该文档的字符编码集是UTF-8,如果不写，就会导致中文乱码 -->
<!-- mate标签可以描述该文档的作者，项目说明，关键词等等的一些元信息 -->
<meta charset="UTF-8">
<!-- 该文档的标题标签 -->
<title>html基本结构</title>
</head>
<!-- 文档的主体标签：html的所有内容都要写在里面 -->
<body>
各人有各人理想的乐园，有自己所乐于安享的世界，
朝自己所乐于追求的方向去追求，就是你一生的道路，
不必抱怨环境，也无须艳羡别人。
</body>
</html>
【Web】JavaScript（No.47）for循环案例（二）
【Web】JavaScript（No.47）for循环案例（二）打印九九乘法表<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style type="text/css">
td{
background-color: greenyellow;
}
.ys{
color: orangered;
}
</style>
</head>
<body>
<h2 class="ys">js打印九九乘法表</h2>
[removed]
//打印九九乘法表
[removed]("<table cellspacing='9'>");
for(var i = 1; i <= 9; i++){
if(i%2==0){
[removed]("<tr class='ys'>");
for(var j =1; j <= i; j++){
[removed]("<td>" + j + " × " + i + " = " + i*j + " " + "</td>");
}
[removed]("</tr>");
}
else{
[removed]("<tr>");
for(var j =1; j <= i; j++){
[removed]("<td>" + j + " × " + i + " = " + i*j + " " + "</td>");
}
[removed]("</tr>");
}
}
[removed]("</table>");
[removed]
</body>
</html>
RSS订阅
182
4
