css实现过渡移动坐标位置

最新推荐文章于 2022-04-24 16:19:44 发布

LPLIFE

最新推荐文章于 2022-04-24 16:19:44 发布

阅读量3k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/LPLIFE/article/details/103534665

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

需求：过渡移动坐标位置。使用下面的两个css属性来实现。

transition：实现过渡效果。具体用法：transition

transform ：使用这个属性可以将元素旋转，缩放，移动，倾斜等，常见的是居中。具体用法：transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #f00;
        transition: all 3s ease;
    }
    body {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
</style>

<body>
    <div id="dd" onclick="bg()"></div>
    <div id="aa" onclick="ba()"></div>
    <div id="cc" onclick="bc()"></div>
    <div id="ee" onclick="be()"></div>
</body>
<script>
    function bg() {
        let el = document.getElementById('dd');
        el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
    }

    function ba() {
        let el = document.getElementById('aa');
        el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';

    }

    function bc() {
        let el = document.getElementById('cc');
        el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
    }

    function be() {
        let el = document.getElementById('ee');
        el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
    }
</script>

</html>

个人认为基础非常重要，日常开发的时候，除了业务、样式交互需求也贼多，但实际上底层的东西基本差不多，会基础的了，就可以在上面变花样了。

比如：

按钮被按压的这个效果，就是用CSS3的animation属性来做的：在被点击的时候，也就是0%，初始高度、宽度不变，到50%的时候缩小高度、宽度（被按压的时候是有陷进去的感觉，通过缩小高度、宽度制造这个效果），100%的时候又恢复回原本的高度、宽度。通过控制动画的时间。就会有一个“被按压、又回弹的”的效果。

LPLIFE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css实现过渡移动坐标位置

需求：过渡移动坐标位置。使用下面的两个css属性来实现。transition：实现过渡效果。具体用法：transitiontransform ：使用这个属性可以将元素旋转，缩放，移动，倾斜等，常见的是居中。具体用法：transform<!DOCTYPE html><html lang="en"><head> <meta chars...
复制链接

扫一扫