这篇文章给大家分享的是有关css3中translate和transition怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。示例：<!DOCTYPE html><html>&
这篇文章给大家分享的是有关css3中translate和transition怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
示例：
<!DOCTYPE html><html><head> <title>translate和transition</title></head><body><style type="text/CSS"> div { width: 100px; height: 75px; background-color: red; border: 1px solid black; } div#translate { transition: all 2s; -ms-transition: all 2s; -WEBkit-transition: all 2s; } div#translate:hover{ transfORM: translate(50px, 100px); -ms-transform: translate(50px, 100px); -webkit-transform: translate(50px, 100px); }</style><div>Hello, This is a Div element</div><div id='translate'>Hello, This is another Div element</div></body></html>演示demo请点(这里)[/css3/translate.html]
translate(a, b)：用官方的话说叫做2D转移，其实就是平面上的x轴和y轴移动，搞那么多名词就是因为我们学识太低，不想让我们容易了解
a - 在横向（左右方向）也就是x轴移动a单位距离，比如是10px，那么就移动10px，正值向右移动，负值向左移动 b - 在纵向（上下方向）也就是y轴移动b单位距离，比如是50px，那么就移动10px，正值向下移动，负值向上移动
起点在左上角哈，但是如果元素位置开始就设置了非原点的话就另说了，就是在元素基础上做计算
原点(0,0)-------
|
|
|
transition 动画过渡
transition： property duration timing-function delay
property - css属性
duration - 动画执行时长 如果为0 动画不执行
timing-function 动画执行方式 默认ease
delay - 动画延迟执行时间 默认0
感谢各位的阅读！关于“css3中translate和transition怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: css3中translate和transition怎么用
本文链接: https://lsjlt.com/news/251727.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0