【html5与css3】旋转

【复习】

行间元素 变成 块状元素的 几种方式

  1. display:block / inline-block / table
  2. float:left/right
  3. position:abosoled/fixed
  4. overflow:hidden(这个不可以)

html 超文本标记语言 结构 css 层叠样式表 表现 js 脚本语言 行为

js 基础题

window.onload = function(){ var a = 10; } alert(a) // 应该输出来的是 undefined 因为变量提升 事件函数内部的 变量 在函数内部 (错了 会报错 !!!)

作用域 作用在一块区域的 函数里面 声明的变量 函数外面是拿不到

报错 是因为 先加载的 alert(a) 后加载的 onl oad 的事件函数 

每个作用域里 都有自己的预解析(所有 var 的东西 都过一遍)

当你 不写 var 的时候 就会被自动 认为是 window的谁谁了

parent 也是 window 还有 top 也是 self 也是 this 也是

js 报错 1 编译错误 2 语法错误 

【html5】

html5 w3c 协议 

css3 升级版的css

es6 等等

video audio canvas

video 视频 MP4

背景颜色 为 黑 可以 通过 饱和度 来设定 hsl (例如 hsl(167,0%,0%)为黑色)

【css3】

transition 过度动画

transition-delay                         延时 1s    简写的时候 延时时间在最后

transition-timing-function          加速 减速 ease 线性运动 过度的动画形式

transition-duration                    运动时间   1s

transition-property                    要运动的样式  比如 写一个 all  比如 只过度 width 

默认缩写 0s all ease 0s

 

transform  变换式 

rotate        旋转     transform: rotate(1turn);   1turn  =  360deg

rotateX  /   rotateY   X轴翻转   Y轴翻转       

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color:rgb(red, green, blue);
            
            /* 居中 */
            position:absolute;
            left: 0;
            right: 0;
            top:350px;
            bottom: 0;
            margin:0 auto;

            /* transition-delay: 0.1s;
            transition-timing-function: ease;
            transition-duration: 1s;
            transition-property: all;  */
            transform: perspective(0px);
            /* transition: 1s; */
            
        }
        /* div:hover{ */
            /* width: 200px;
            height: 200px; */
            /* transform: rotate(90deg); */
            /* transform: rotate(1turn); */
            /* transform: perspective(600px) rotateX(90deg); */
        /* } */
    </style>
    <div id='div1'></div>
    <script type="text/javascript">
        
        onl oad = function(){
            var deg = 0;
            // var flag = false;
            // var r,b,g;
            var r = parseInt(Math.random() * 255) + 1;
            var b = parseInt(Math.random() * 255) + 1;
            var g = parseInt(Math.random() * 255) + 1;
            var flag = 0;
            setInterval(function(){
                

                deg++;
                if(flag == 0){
                    div1.style.transition = "0s";
                    div1.style.transform = "perspective(600px) rotateY(" + deg + "deg)";
                }else if(flag == 1){
                    div1.style.transition = "0s";
                    div1.style.transform = "perspective(600px) rotateX(" + deg + "deg)";
                }else if(flag == 2){
                    div1.style.transition = "1s";
                    div1.style.transform = "scale(2,1)";
                }
                div1.style.background = "rgb("+ r +"," +b +","+ g +")"
                deg = deg>360?0:deg;
                if(deg == 0){
                    // flag = !flag;
                    flag++;
                    if(flag>2){
                        flag = 0;
                    }
                    r = parseInt(Math.random() * 255) + 1;
                    b = parseInt(Math.random() * 255) + 1;
                    g = parseInt(Math.random() * 255) + 1;
                }
            },8);

        }
    </script>
</body>
</html>

skew(skewx,skewy) 扭曲 倾斜  deg

scale(scalex,scaley) 宽高变化 当负数值的时候 会 镜像

 

https://www.cnblogs.com/pythonywy/p/11833032.html  很有意思

桃ちゃん

 

 

 

 

 

上一篇:8. animation学习


下一篇:CSS 动画介绍