首页 > Web开发 > 详细

CSS3学习笔记-过渡

时间:2018-09-22 22:48:24      阅读:200      评论:0      收藏:0      [点我收藏+]

过渡函数ease-in等实际上是贝塞尔曲线的实现

过渡函数还有一个step()函数,用于把整个操作领域划分成同样大小的间隔

图解

技术分享图片

简写,多属性逗号隔开

.test{
    transition: all .2s ease-in .2s;
}

触发方式

伪元素触发

:hover :active :checked :focus

媒体查询触发

@media

使用js脚本触发

小技巧

.test{
    background-color: blue;
    transition: background-color .2s ease-in;
}

.test:hover{
    background-color: red;
    transition: background-color .2s ease-out;
}

硬件加速

.test{
    width: 200;
    transition: width .2s ease-in;
    transform:translate(0);
}
.test:hover{
    width: 100;
    transition: width .2s ease-out;
}

 

CSS3学习笔记-过渡

原文:https://www.cnblogs.com/goOtter/p/9691455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!