CSS3 第三天

transform-origin;

旋转参照的旋转点,0 0是左上角,可以使用left center等属性来设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background: hotpink;
        }
        
        .pkBox {
            width: 150px;
            height: 200px;
            margin: 250px auto;
            border: 1px solid #000;
            position: relative;
        }
        
        .pkBox>img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        /* 鼠标悬停 旋转 */
        
        .pkBox:hover>img:nth-child(1) {
            transform: rotate(60deg);
        }
        
        .pkBox:hover>img:nth-child(2) {
            transform: rotate(120deg);
        }
        
        .pkBox:hover>img:nth-child(3) {
            transform: rotate(180deg);
        }
        
        .pkBox:hover>img:nth-child(4) {
            transform: rotate(240deg);
        }
        
        .pkBox:hover>img:nth-child(5) {
            transform: rotate(300deg);
        }
        
        .pkBox:hover>img:nth-child(6) {
            transform: rotate(360deg);
        }
        .pkBox >img{
            transition: all 1s;
            /* 变换中心点 */
            transform-origin: right top;
        }

        /* 旋转大盒子 */
        .pkBox{
            transition:  all 1s 1s;
            /*  变换的中心点 也能够使用 具体的 坐标来设置 */
            /*transform-origin: right top;*/
            /* 坐标的原点 是自己的 左上角
                x  →
                y ↓
             */
            transform-origin: 0 0 ;
        }
        .pkBox:hover{
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="pkBox">
        <!--img[src=img/pk1.png]*6-->
        ![](img/pk1.png)
        ![](img/pk1.png)
        ![](img/pk1.png)
        ![](img/pk1.png)
        ![](img/pk1.png)
        ![](img/pk1.png)
    </div>
</body>

</html>

3d变换

在rotate,translate等属性加上z轴。
如果效果不明显,可以为元素添加一个perspective属性,表示距离屏幕的距离,越小距离屏幕越近。
transform-style:preserve-3d;浏览器默认没有开启3d运动渲染效果,需要设置这个属性(设置3d运动渲染效果后能设置透明度,不然会没有过度效果)

跑马灯效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: skyblue;
            /* 出现了 形式问题 提一级 到父元素中 */
            perspective: 1000px;
        }
        
        .dogBox {
            width: 249px;
            height: 251px;
            background: url('img/dog2.jpg') no-repeat center/cover;
            position: relative;
            margin: 150px auto;

            /* 直接 设置距离 */
            /*perspective: 1000px;*/
        }
        
        .dogBox>.dog {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('img/dog.gif')no-repeat center/cover;

        }
        
        .dog:nth-child(1) {
            transform: rotateY(0deg) translateZ(400px);
        }
        
        .dog:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        .dog:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        .dog:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }
        
        .dog:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }
        
        .dog:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }


        /* 鼠标悬停 旋转 */
        .dogBox:hover{
            transform: rotateY(360deg) ;
            transition:  all 3s linear;
        }

        /* 浏览器 默认 不会 渲染 3d变换的 元素 
            只会 显示 一个 基础的 3d效果而已
            如果希望浏览器 能够显示 运动的 3d元素 
            需要在    父元素    中 设置一个 属性
         */
         .dogBox{
             transform-style: preserve-3d;
         }

         /* perspective 属性 设置位置的问题 
            perspective 设置之后 子元素 显示的效果 是 相对于 设置了 perspective 的元素
            如果 无法理解 相对 关系
            可以直接记结果
            出现 显示 问题 将 perspective提一级即可
         */

    </style>
</head>

<body>
    <div class="dogBox">
        <div class="dog"></div>
        <div class="dog"></div>
        <div class="dog"></div>
        <div class="dog"></div>
        <div class="dog"></div>
        <div class="dog"></div>
    </div>
</body>

</html>

动画的基本使用

两种写法

  1. @keyframes name{
      from{}
      to{
        
      }
    }
    
  2. @keyframes name{
      n%{}
      m%{}
      100%{}
    }
    

animation

  • animation:name duration delay timing-function iteration-count fill-mode

    属性值可以连写,但要注意持续时间要写在延迟时间前面
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: hotpink;
                margin: 100px auto;
                /* 过渡属性
                        状态1   ->  状态2 能够 被动画的方式看到
                 */
            }
            /* 动画使用 */
            /* 步骤1  定义一个动画*/
            
            @keyframes autoMove {
                /* 从 xxx   如果我们希望是从元素 的默认状态 作为起始点
                    form 可以省略不写
                */
                from {}
                /* 到 xxx */
                to {
                    width: 200px;
                    height: 300px;
                    background: yellowgreen;
                    ;
                }
            }
            
            .autoMove {
                /* 设置动画 */
                /*animation: */
                /*   动画的名字 */
                animation-name: autoMove;
                /* 动画持续时间 */
                animation-duration: 1s;
                /* 动画播放了 一次
                    可以指定 具体的次数 
                    也能够设置 无穷
                 */
                /*animation-iteration-count: 3;*/
                /*animation-iteration-count: infinite;*/
                /*  动画播放完毕之后 还原为默认的状态 */
                /*animation-fill-mode: forwards;*/
                /* 动画延迟一会播放 */
                animation-delay: 2s;
                /* 动画的 线型 
                    取值 跟 过渡的 该属性 是一样的
                 */
                animation-timing-function: linear;
                /* 复合写法
                    一般 设置 时间 延迟时间 动画的名字 动画停止之后 停留的状态
                    先出现的时间 是持续时间
                    后出现的时间 是延迟时间
                 */
                animation: autoMove 1s 1s linear forwards;
            }
        </style>
    </head>
    
    <body>
        <div class='autoMove'></div>
    </body>
    
    </html>
    
    • 动画库的基本使用:

    animate.css

    找动画名字
    添加名字的 class
    animated
    全部都在 animate.css 的最顶部
    剥离动画
    复制粘贴## 伸缩布局、弹性布局

display:flex;
有主轴和复轴,默认是x为正轴,y为复轴
justify-content:(flex-start,flex-end,space-around,space-between,center)
align-items:(flex-start,flex-end,center)
单独设置属性
align-self:(flex-start,flex-end,center)
改变主轴方向
flex-drection:column(y轴) (row(横向))
设置比例
父元素要设置display:flex;
子元素设置flex:n;
每一分的尺寸等于总宽度/n*子元素个数,设置flex之后,主轴方向的尺寸就无效了,再加属性也无效
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            padding: 0;
            /*  如果要使用弹性布局 找到 父元素
                子元素 就会应用 我们的 弹性布局
             */
            display: flex;
            /* 调整 元素 在 主轴方向上的 排布 
                flex-start 默认值
                flex-end 主轴的 末尾
                 space-around 平均排布
                 space-between 平均排布 两边 会顶格
                 center 内容居中
            */
            justify-content: center;
            /* 一次性 设置 所有元素 在 副轴的 排布
                副轴
                center 居中 
                flex-start 默认的起始位置
                flex-end 结束位置
             */
            align-items: center;
        }
        
        li {
            width: 50px;
            height: 50px;
            margin: 10px;
            background: hotpink;
        }
        /* 单独 设置 某一个元素 在 副轴防线的排布 */
        
        li:nth-child(3) {
            /* 单独设置 副轴的排布 */
            align-self: flex-end;
        }
        
        li:nth-child(4) {
            /* 单独设置 副轴的排布 */
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,807评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • animation简介▪ animation无疑是CSS3里最牛的功能。可以采用较少的代码制作超炫的动画。▪ an...
    柒月柒日晴7阅读 470评论 0 2
  • 一、认识jQuery jQuery是继prototype之后又一个优秀的JavaScript库,是一个John r...
    清心挽风阅读 473评论 0 2