HTMLCSS学习笔记（十九）——过渡与2D

最新推荐文章于 2024-09-10 17:45:18 发布

粽子师兄

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量204

点赞数

分类专栏： HTML\CSS 文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/qq_45268602/article/details/108041810

版权

HTML\CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS过渡

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
transition-delay：检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型

简写：
transition:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型(linear,ease-in,ease-out,ease-in-out)
transition-timing-function：检索或设置对象中过渡的动画类型，属性值有：

linear：规定以相同速度开始至结束的过渡效果。
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in：规定以慢速开始的过渡效果。
ease-out：规定以慢速结束的过渡效果。
ease-in-out：规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n)（贝塞尔曲线）：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

逐帧动画：steps();
在这里插入图片描述

2D：transform

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()。transform有多个属性值时（属性值之间使用空格隔开），建议将translate写在最前面。

translate() 元素向指定的方向移动,类似于position中的relative。
- translate(x轴位移的值 )
- translateX(y轴位移的值)
- translateY(y轴位移的值)
- translate(X,Y) 位移的值可为负数，是加了单位的属性值
scale(1,0.5) X、Y的缩放
- 可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
- scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1
- scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是1
rotate() 旋转
- rotateX(***deg) 方法，元素围绕其 X 轴以给定的度数进行旋转
- rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
- rotate(50deg)代表的围绕Z轴旋转50度
skew() 倾斜
- skewX() X轴倾斜
- skewY() Y轴倾斜
- 一个参数时：表示水平方向的倾斜角度
- 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

transform-origin：元素变形原点（例：transform-origin:100px top）

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用。
因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。
如果该元素同时有位移及旋转或者其他变形方法，需要将位移写在最前面。
2D 转换元素能够改变元素 x 和 y 轴。

移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            background: gray;
            overflow: hidden;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
            transition: 1s;
            margin: 50px auto;
        }
        .box:hover .box1{
            transform: translate(100%);
			/* transform: translateX(100%); */
            /* transform: translateY(100%); */
            /* transform: translate(100%,100%); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>

缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            background: gray;
            overflow: hidden;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
            transition: 1s;
            margin: 50px auto;
        }
        .box:hover .box2{
            transform: scale(1,1.25);
            /* transform: scale(1.25); */
            /* transform: scaleX(1.5); */
            /* transform: scaleY(1.5); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2"></div>
    </div>
</body>
</html>

倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            background: gray;
            overflow: hidden;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
            transition: 1s;
            margin: 50px auto;
        }
        .box:hover .box3{
            transform: skew(45deg);
            /* transform: skew(30deg, 45deg); */
            /* transform: skewX(-30deg); */
            /* transform: skewY(45deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box3"></div>
    </div>
</body>
</html>

旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            background: gray;
            overflow: hidden;
        }
        .box4{
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
            transition: 1s;
            margin: 50px auto;
            transform-origin: left top;
            /* transform-origin: center top; */
            /* transform-origin: 50px 50px; */
            /* transform-origin: -50px -50px; */
            /* transform-origin: 30% 0; */
            /* transform-origin: center; */
            /* transform-origin: 30%; */
        }
        .box:hover .box4{
            transform: rotate(360deg);
            /* transform: rotateX(45deg); */
            /* transform: rotateY(45deg); */
            /* transform: rotateZ(45deg); */
            /* transform: rotate(360deg) scale(1.5); */
            /* transform:scale(1.5) rotate(360deg); */
            /* transform: translate(100px) rotate(360deg); */
            /* transform: rotate(360deg) translate(100px); */
            /* transform: translate(100%) rotate(360deg) scale(1.5); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box4"></div>
    </div>
</body>
</html>

过渡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clear_fix::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
        .box{
            width: 1120px;
            height: auto;
            margin: 0 auto;
        }
        .box .box1,.box4{
            width: 468px;
            height: 362px;
            margin: 10px;
            float: left;
            background: url(../images/bg.jpg);
            padding-left: 32px;
            padding-top: 32px;
            overflow: hidden;
        }

        /* box1 */
        .max_pic{
            width: 437px;
            height: 317px;
        }
        .box1{
            position: relative;
        }
        .box1 img{
            position: absolute;
            transition: 0.5s;
            transition-timing-function: linear;
        }
        .box1:hover .max_pic{
            width: 285px;
            height: 203px;
        }
        .box1 img:nth-child(2){
            left: 340px;
            top: -92px;
            transition-delay: 150ms;
        }
        .box1:hover img:nth-child(2){
            left: 340px;
            top: 32px;
        }
        .box1 img:nth-child(3){
            left: 100%;
            top: 142px;
            transition-delay: 300ms;
        }
        .box1:hover img:nth-child(3){
            left: 340px;
            top: 142px;
        }
        .box1 img:nth-child(4){
            left: 340px;
            top: 100%;
            transition-delay: 450ms;
        }
        .box1:hover img:nth-child(4){
            left: 340px;
            top: 256px;
        }
        .box1 img:nth-child(5){
            left: 185px;
            top: 100%;
            transition-delay: 600ms;
        }
        .box1:hover img:nth-child(5){
            left: 185px;
            top: 256px;
        }
        .box1 img:nth-child(6){
            left: 32px;
            top: 100%;
            transition-delay: 750ms;
        }
        .box1:hover img:nth-child(6){
            left: 32px;
            top: 256px;
        }

        /* box4 */
        .box4{
            position: relative;
        }
        .box4 img{
            position: absolute;
            transition: 0.5s;
            transition-timing-function: linear;
        }
        .box4 img:nth-child(1){
            left: 122px;
        }
        .box4:hover img:nth-child(1){
            left: 32px;
        }
        .box4 img:nth-child(2){
            left: 100%;
            top: -163px;
        }
        .box4:hover img:nth-child(2){
            left: 336px;
            top: 32px;
        }
        .box4 img:nth-child(3){
            left: 100%;
            top: 100%;
        }
        .box4:hover img:nth-child(3){
            left: 336px;
            top: 206px;
        }

    </style>
</head>
<body>
    <div class="box clear_fix">
        <div class="box1">
            <img src="../images/con1-1.jpg" alt="" class="max_pic">
            <img src="../images/con1-2.jpg" alt="">
            <img src="../images/con1-3.jpg" alt="">
            <img src="../images/con1-4.jpg" alt="">
            <img src="../images/con1-5.jpg" alt="">
            <img src="../images/con1-6.jpg" alt="">
        </div>
        <div class="box1">
            <img src="../images/con2-1.jpg" alt="" class="max_pic">
            <img src="../images/con2-2.jpg" alt="">
            <img src="../images/con2-3.jpg" alt="">
            <img src="../images/con2-4.jpg" alt="">
            <img src="../images/con2-5.jpg" alt="">
            <img src="../images/con2-6.jpg" alt="">
        </div>
        <div class="box1">
            <img src="../images/con3-1.jpg" alt="" class="max_pic">
            <img src="../images/con3-2.jpg" alt="">
            <img src="../images/con3-3.jpg" alt="">
            <img src="../images/con3-4.jpg" alt="">
            <img src="../images/con3-5.jpg" alt="">
            <img src="../images/con3-6.jpg" alt="">
        </div>
        <div class="box4">
            <img src="../images/con4-1.jpg" alt="">
            <img src="../images/con4-2.jpg" alt="">
            <img src="../images/con4-3.jpg" alt="">
        </div>
    </div>
</body>
</html>

2D案例：打开折扇效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 1000px;
            height: 510px;
            margin: 50px auto;
            /* background: greenyellow; */
            border-bottom: 2px solid #000;
        }
        .box div{
            position: absolute;
            width: 120px;
            height: 446px;
            /* background: #f00; */
            /* 使用以下居中方式出现bug */
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto; */
            margin-left: 440px;
            bottom: 60px;
            box-shadow: 3px 3px 3px #333;
            border-radius: 10px;
            opacity: 0;
            filter: alpha(opcity=0);/*针对低版本IE设置透明度兼容*/
            transition: all 1s;
            transform-origin: center top;
        }
        .box:hover div{
            box-shadow: 1px 1px 1px #666;
            opacity: 1;
        }
        .box div:nth-child(1){
            z-index: 13;
            opacity: 1;
            transition-delay: 0;
            background: url(../images/bookmark.png);
        }
        .box div:nth-child(2){
            z-index: 12;
            transition-delay: 50ms;
            background: url(../images/bookmark_1.png);
        }
        .box div:nth-child(3){
            z-index: 11;
            transition-delay: 100ms;
            background: url(../images/bookmark_2.png);
        }
        .box div:nth-child(4){
            z-index: 10;
            transition-delay: 150ms;
            background: url(../images/bookmark_3.png);
        }
        .box div:nth-child(5){
            z-index: 9;
            transition-delay: 200ms;
            background: url(../images/bookmark_4.png);
        }
        .box div:nth-child(6){
            z-index: 8;
            transition-delay: 250ms;
            background: url(../images/bookmark_5.png);
        }
        .box div:nth-child(7){
            z-index: 7;
            transition-delay: 300ms;
            background: url(../images/bookmark_6.png);
        }
        .box div:nth-child(8){
            z-index: 6;
            transition-delay: 350ms;
            background: url(../images/bookmark_1.png);
        }
        .box div:nth-child(9){
            z-index: 5;
            transition-delay: 400ms;
            background: url(../images/bookmark_2.png);
        }
        .box div:nth-child(10){
            z-index: 4;
            transition-delay: 450ms;
            background: url(../images/bookmark_3.png);
        }
        .box div:nth-child(11){
            z-index: 3;
            transition-delay: 500ms;
            background: url(../images/bookmark_4.png);
        }
        .box div:nth-child(12){
            z-index: 2;
            transition-delay: 550ms;
            background: url(../images/bookmark_5.png);
        }
        .box div:nth-child(13){
            z-index: 1;
            transition-delay: 600ms;
            background: url(../images/bookmark_6.png);
        }
        .box:hover div:nth-child(1){
            z-index: 13;
            background: url(../images/bookmark.png);
            transform: rotate(90deg);
        }
        .box:hover div:nth-child(2){
            z-index: 12;
            background: url(../images/bookmark_1.png);
            transform: rotate(75deg);
        }
        .box:hover div:nth-child(3){
            z-index: 11;
            background: url(../images/bookmark_2.png);
            transform: rotate(60deg);
        }
        .box:hover div:nth-child(4){
            z-index: 10;
            background: url(../images/bookmark_3.png);
            transform: rotate(45deg);
        }
        .box:hover div:nth-child(5){
            z-index: 9;
            background: url(../images/bookmark_4.png);
            transform: rotate(30deg);
        }
        .box:hover div:nth-child(6){
            z-index: 8;
            background: url(../images/bookmark_5.png);
            transform: rotate(15deg);
        }
        .box:hover div:nth-child(7){
            z-index: 7;
            background: url(../images/bookmark_6.png);
            transform: rotate(0deg);
        }
        .box:hover div:nth-child(8){
            z-index: 6;
            background: url(../images/bookmark_1.png);
            transform: rotate(-15deg);
        }
        .box:hover div:nth-child(9){
            z-index: 5;
            background: url(../images/bookmark_2.png);
            transform: rotate(-30deg);
        }
        .box:hover div:nth-child(10){
            z-index: 4;
            background: url(../images/bookmark_3.png);
            transform: rotate(-45deg);
        }
        .box:hover div:nth-child(11){
            z-index: 3;
            background: url(../images/bookmark_4.png);
            transform: rotate(-60deg);
        }
        .box:hover div:nth-child(12){
            z-index: 2;
            background: url(../images/bookmark_5.png);
            transform: rotate(-75deg);
        }
        .box:hover div:nth-child(13){
            z-index: 1;
            background: url(../images/bookmark_6.png);
            transform: rotate(-90deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>