HTML学习four——days（过渡、transform、动画）

最新推荐文章于 2023-08-17 15:31:50 发布

qq_44980451

最新推荐文章于 2023-08-17 15:31:50 发布

阅读量345

点赞数 1

文章标签：动画 html 学习

本文链接：https://blog.csdn.net/qq_44980451/article/details/125435498

版权

过渡

就是HTML之中的元素从一种状态到另一种状态的过程
名称：hover{ } ——鼠标放置便会触发
基本设置：transition：宽时间 , 高时间；
也可以直接设 all 时间；
等待时间 step-end 时间；

		.one{
            width: 200px;
            height: 200px;
            background-color: gray;
            transition: width 1s,height 1s;
     		   }
        .one:hover{
            width: 300px;
            height: 300px;
            background-color: pink;
     			   } 
   <div class="one">
    哈哈哈
   </div>

transform

属性：（属性值）；
1.rotate（旋转），单位是deg，分别依次XYZ方向。也可以在在单词后面加轴。
可以使用右手定则法，右手握拳之后大拇指竖起，之后手背对自己，拇指所指放向和轴相同，则旋转方向和剩余手指的指向相同。
2.scale（伸缩变换），可以同时设置X和Y轴，且伸缩大小不会影响其他元素。
3.位移translate（）括号内设置位移距离，百分比距离相对其本身。我们可以利用位移设置居中，设置过程：
position：absolute；绝对位置
margin-left：50%；距离左边一半
transform：translate（-50%）；设置位移

.one{
            width: 200px;
            height: 200px;
            background-color: gray;
            /* margin: 100px auto; */
            transition: all 1s;
        }
        .one:hover{
            /* 旋转 */
            transform: rotate(180deg);
            /* 放大缩小 */
           /* transform: scale(5,4);  */
           /* 位移 */
           /* transform: translate(50%,50%); */
        }
    </style>
</head>
<body>
   <div class="one">
    哈哈哈
   </div> 
</body>

动画

1.属性：属性值。。；
animation：name动画名称 duration过渡耗时 timing-function速度曲线 denlay等待事件 iteration-count循环次数 direction是否反向播放 dill-mode动画停止方向
2.声明：@frames 名称{ 属性：属性值}
from to写法
{
from{属性：属性值；}
to{属性：属性值；}
}

   .one{
            width: 200px;
            height: 200px;
            background-color: gray;
            /* margin: 100px auto; */
            /* transition: all 1s; */
            animation: move 2s;
        }
        @keyframes move {
            from{
                transform: translate(0px);
            }
            to{
                transform: translate(60px);
            }
        }
        
    </style>
</head>
<body>
   <div class="one">
    哈哈哈
   </div> 
</body>

百分比写法
百分比（10%）{属性：属性值；}
。。。。。
百分比（100%）{属性：属性值；}

.one{
            width: 200px;
            height: 200px;
            background-color: gray;
            /* margin: 100px auto; */
            /* transition: all 1s; */
            animation: move 2s;
        }
        @keyframes move {
            20% {
                transform: translate(0px,0px);
            }
            40%{
                transform: translate(600px,0px);
            }
            60% {
                transform: translate(600px,600px);
            }
            80% {
                transform: translate(0px,600px);
            }
            100% {
                transform: translate(0px,0px);
            }
        }
        
    </style>
</head>
<body>
   <div class="one">
    哈哈哈
   </div> 
</body>