HTML CSS样式动画基础实现JavaScript基础运用实现

最新推荐文章于 2024-07-25 09:24:40 发布

爱喝柠檬茶的猫

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量157

点赞数 2

文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/jereet/article/details/117653693

版权

CSS动画的基础实现

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关卡7</title>
</head><link rel="stylesheet" href="动画.css">
<body>
    <div class="div-1">
        <div class="div1"></div></div>
    <div class="div">
        <div class="div2"></div>
    </div>
</body>
</html>

CSS样式代码：

.div1{
    width: 100px;
    height: 100px;
    background-color: #DD736B;
    position: relative;
    animation-name: name1;
    animation-duration: 3s;
    border-radius: 50%;
    animation-iteration-count: infinite;
    margin-bottom: 20px;

}
.div{
    width: 401px;
    height: 401px;
    border: 1px solid;
    border-color: #000;
    background-color: aqua;
    
}
.div2{
    width: 100px;
    height: 100px;
    background-color: #DD736B;
    position: relative;
    animation-name: name2;
    animation-duration: 4s;
    border-radius: 50%;
    animation-iteration-count: infinite;
}
.div-1{
    width: 701px;
    height: 101px;
    background-color: aqua;
    margin-bottom: 10px;
}
@keyframes name1 {
    0%{background-color: #DD736B; left: 0px;border-radius: 50%} 
    25%{background-color: #DD736B; left: 300px;border-radius: 0%;} 
    50%{ background-color: #99D43C;left: 600px; border-radius: 50%;}
    75%{ background-color: #99D43C;left: 300px;border-radius: 0%}
    100%{background-color: #DD736B;left: 0px;border-radius: 50%}
}
@keyframes name2 {
    0%{background-color: #DD736B; left: 300px;top:300px;border-radius: 50%} 
    25%{background-color: #99D43C; left: 0px; top:300px;border-radius: 0%;} 
    50%{ background-color: #99D43C;left: 0px; top:0px;border-radius: 0%;}
    75%{ background-color: #DD736B;left: 300px;top:0px;border-radius: 50%}
    100%{background-color: #DD736B;left: 300px;top:300px;border-radius: 50%}
}

代码运行效果可自行下去尝试

JavaScript基础运用：添加<script> </script>标签，JavaScript的内容写在此标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window.alert</title>
</head>
<body>
    <script>
        var name ="张三";
        var age = 18;
        var phone = 8008208820;
        window.alert(
            "我叫" +name+ ",今年"+age+"岁，电话是:"+phone+"，您千万不要联系我。");
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1</title>
</head>
<body>
    <script>
        for(i=1;i<=100;i++){
        var x = prompt("请输入一个整数：");
        if(x>200 || x<50){
            alert("请输入50-200之间的整数"); 
        }else{
            alert("验证通过");
            break;
        }
    }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2</title>
</head>
<body>
    <script>
        var first=prompt("请输入第一个数：");
        var Second=prompt("请输入第二个数：");
        if(first>Second){
            alert("最大的那个数是："+first);
        }else{
            alert("最大的那个数是："+Second);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习3</title>
</head>
<body>
    <script>
        var x=prompt("X变量=");
        var y=prompt("Y变量=");
        var o=0;
        alert("交换前:X变量="+x +",Y变量="+y);
            o=y;
            y=x;
            x=o;
        alert("交换后:X变量="+x +",Y变量="+y);
    </script>
</body>
</html>