transition&transform

来源：互联网发布：java随机数求和编辑：程序博客网时间：2024/06/05 18:14

transition

属性

定义：动态过渡效果实现

取值：transition:properties duration timing delay

说明：属性持续时间动画类型延迟

注意：定义给需要添加过渡效果的对象上

实例

拉帘

效果

思路

给div设置伪类hover，为div添加两个伪元素，用transition实现动画过渡。

源码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拉帘</title>    <style type="text/css">        div{            position: relative;            margin: 100px auto;            width: 400px;            height: 200px;            text-align: center;            line-height: 200px;            font-size: 60px;            color: #88f;            text-shadow: 3px -3px 1px #44f;            box-shadow:-9px 13px 23px grey;            overflow: hidden;        }        div::before,div::after{            position: absolute;            content: "";            width: 220px;            height: 200px;            top: 0;            background-color: #ea3524;            opacity: .5;            transition: left,right 3s,3s;        }        div::before{            left: 0;        }        div::after{            right: 0;        }        div:hover:before{            left:-220px;        }        div:hover:after{            right:-220px;        }    </style></head><body>    <div>前端大神</div></body></html>

transform

属性

定义：转换，根据具体的效果对当前的对象进行转换

常用的转换效果取值有：

位移偏移：translate、translatex、translatey

角度旋转：rotate、rotatex、rotatey

角度拉伸：skew、skewx、skewy

对象缩放：scale、scalex、scaley

实例

位移偏移

效果

这里写图片描述

源码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            position: absolute;            left: 100px;            right: 100px;            width: 100px;            height: 100px;            background: red;            transition: transform 3s;        }        div:hover{            transform: translateX(100px);        }    </style></head><body>    <div></div></body></html>

角度旋转

效果

三角形

源码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            margin: 100px auto;            width: 0;            height: 0;            border: 100px solid red;            border-top-width: 0px;            border-top-color: transparent;            border-right-color: transparent;            border-left-color: transparent;            transition: transform 2s;        }        .trans{            transform: rotate(180deg);        }    </style></head><body>    <div></div>    <script type="text/javascript">        var div = document.querySelector("div");        var count = 1;        div.addEventListener("click",function(){            div.classList.toggle("trans");        })    </script></body></html>

角度拉伸

效果

源码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            position: absolute;            left: 100px;            right: 100px;            width: 100px;            height: 100px;            background: red;            transition: transform 3s;        }        div:hover{            /*transform: translateX(100px);*/            //transform: rotateY(-60deg);            transform: skew(40deg);        }    </style></head><body>    <div></div></body></html>

角度拉伸

效果

源码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            position: absolute;            left: 100px;            right: 100px;            width: 100px;            height: 100px;            margin:100px;            background: red;            transition: transform 3s;        }        div:hover{            transform:scale(1.5,1.5);        }    </style></head><body>    <div></div></body></html>

总结

transition和transform两者需要结合起来使用，transform转换对象效果，transition实现动画过渡。

1 0