WEB_CSS

1.animation 动画

  <style>
         .box{
            width: 200px;
            height: 200px;
            background-color: rgb(55, 20, 255);
            /* animation执行动画 */
            /* animation: key1 2s; */
            animation-name: key1;
            animation-duration: 2s;    /* 动画持续时间*/
            /* 贝沙尔曲线 linear匀速 */
            animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
            /* 延迟启动动画 */
            animation-delay: 1s;
            /* 动画执行次数   infinite一直执行*/
            animation-iteration-count: 1;
            /* animation-direction: alternate 回弹 */
            animation-direction: alternate;
            /* 动画结束后的状态 backwards首位   forwards终点 */
            animation-fill-mode: backwards;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }
        /* 定义动画  */
        @keyframes key1 {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }

        .box:hover{
            /* 控制动画的状态 */
            animation-play-state: paused;
        }
        
        p{
            height: 30px;
            background-color: pink;
            font-size: 20px;
            width: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            animation: wd 3s steps(11) forwards  infinite;

        }
        @keyframes wd {
            0%{
                width: 0%;
                
            }
            50%{
                width: 50%;
            }
            100%{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>我爱你中国，亲爱的母亲</p>
</body>

2.transform

　　// sacle(1.5) 放大1.5倍

　　// translate(X移动距离,Y移动距离)

　　// rotate(旋转多少度 deg单位) 默认是Z轴

　　// rotate3d(x,y,z) 三个方向

　　/* 移动必须放在前面因为旋转放前面会影响x，y轴 */

transform: translate(100px, 100px) rotate(180deg) scale(1.5);

　　/* X,Y 轴正值都是朝里转 */

/* transform: rotateX(-40deg); */

/* transform: rotateY(60deg); */

/* transform: rotateZ(60deg); */

/* x，y，z轴的如何绕中心轴转圆心到x，y，z的的矢量，这条射线 */

transform: rotate3d(1,1,1, 360deg);

2. CSS 的一些api

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

(1) Outline：none 是边框看不到

Border是设置边框的

(1) Border：none 是隐藏边框

background-size 属性规定背景图像的尺寸。

(1) background-size:contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(宽高设置好图片适合其宽高)

// 产生0-3的随机数 0就是小数 3就是大数
	// 思路比如3就是大数大数 = 大数 - 小数 + 1 小数 = 小数
	for(var i=0; i<1000; i++){
	console.log(Math.floor(Math.random()*4 + 0));
	}

posted @ 2020-05-22 16:11 艺术就是派大星_s 阅读(115) 评论(0) 收藏举报

刷新页面返回顶部

艺术就是派大星_s

WEB_CSS

公告