WEB前端--Day4 (javascript基础)-CSDN博客

本文链接：https://blog.csdn.net/wx_yiyi_xixi/article/details/84865271

本文介绍了JavaScript的基础知识，包括CSS的形变、过渡和动画，JavaScript的概念、特点、与HTML的结合方式，以及ECMAScript的基本语法如变量定义、数据类型、运算符和流程控制语句。

摘要由CSDN通过智能技术生成

一、css的属性

1.形变和过渡

形变：tranform

过渡：transition

1.1形变

rotate(degree):旋转，指定的标签需要旋转的度数，degree表示度数

scale():指定的标签放大或者缩小【拉伸或者缩放】

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #transform{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                /*外边距*/
                margin: 100px;
                
                
                /*设置旋转点*/
                /*center left right top bottom*/
                transform-origin: center left;
                
                /*设置旋转的角度*/
                /*默认情况下沿着z轴旋转的
                 * rotateX()
                 * rotateY()
                 * deg--->degree
                 */
                /*transform: rotate(60deg);*/
                
                /*拉伸形变*/
                /*默认情况下横向拉伸和纵向拉伸是同时进行的
                 * scaleX(num)   scaleY(num)
                 * num > 1  :表示放大num倍
                 * 0<num<1 :表示缩小num倍
                 */
                /*transform: scale(1);*/
                
                transform: scale(2) rotate(30deg);  
            }
        </style>
    </head>
    <body>
        <div id="transform"></div>
    </body>
</html>

1.2过渡

transition-duration：过渡的时间

transition-property：需要过渡的标签

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #transition{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                /*外边距*/
                margin: 100px;
                
                transform: rotate(-90deg);
                
                color: white;
                
                /*添加过渡
                 * 哪个标签需要过渡
                 * 发生过渡的时间
                 */
                transition-duration: 5s;
                transition-property: all;
                
            }
        </style>
    </head>
    <body>
        <div id="transition">形变和过渡</div>
    </body>
</html>

1.3案例：照片墙

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 100%;
                height: 700px;
                /*auto:表示自动适配*/
                margin: 50px auto;
                
                background-color: orange;
            }
            
            /*共性*/
            img{
                width: 180px;
                height: 220px;
                border: solid 3px white;
                
                margin: 15px;
                
                /*过渡*/
                transition-duration: 2s;
                /*指定某个属性发生变化的时候触发过渡属性*/
                transition-property: transform;
            }
            
            /*个性*/
            /*每张图片旋转不同的角度*/
            div img:nth-child(1){
                transform: rotate(15deg);
            }
            div img:nth-child(2){
                transform: rotate(5deg);
            }
            div img:nth-child(3){
                transform: rotate(-15deg);
            }
            div img:nth-child(4){
                transform: rotate(10deg);
            }
            div img:nth-child(5){
                transform: rotate(-5deg);
            }
            div img:nth-child(6){
                transform: rotate(15deg);
            }
            div img:nth-child(7){
                transform: rotate(5deg);
            }
            div img:nth-child(8){
                transform: rotate(-10deg);
            }
            div img:nth-child(9){
                transform: rotate(15deg);
            }
            
            /*设置鼠标悬浮*/
            #box > img:hover{
                transform: scale(1.2) rotate(0deg); 
            }
            
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/photowall/pic1.jpg"/>
            <img src="img/photowall/pic2.jpg"/>
            <img src="img/photowall/pic3.jpg"/>
            <img src="img/photowall/pic4.jpg"/>
            <img src="img/photowall/pic5.jpg"/>
            <img src="img/photowall/pic6.jpg"/>
            <img src="img/photowall/pic7.jpg"/>
            <img src="img/photowall/pic8.jpg"/>
            <img src="img/photowall/pic9.jpg"/>
        </div>
    </body> 
</html>

2.动画

2.1使用

animation，主要是结合形变和过渡使用

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: purple;
                
                /*设置旋转的轴点*/
                transform-origin: left top;
                
                /*给标签添加动画*/
                /*参数：动画名称  动画持续的时间  动画的形式  动画执行的次数
                 
                 * 动画名称：自定义