css3动画——2d动画，过渡动画

最新推荐文章于 2024-05-11 13:53:44 发布

莓莓儿～

最新推荐文章于 2024-05-11 13:53:44 发布

阅读量988

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/fanfan_h/article/details/89928754

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

css3的动画

分类： 2d 动画，3d 动画， 2d转3d，过渡动画和帧动画

《一》2d转换:transfrom

转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

属性	描述
translate()	平移（沿x,y,z轴方向平移 px）
rotate()	旋转（沿x,y,z轴方向平移 deg）
scale()	放大
skew	(变形 deg)

translate():
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
默认旋转x 轴
translatex(100px):沿x轴向右平移100px。
transform:translatex(100px); transform:translatey(100px); transform:translatey(100px);
rotate():
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
默认旋转z 轴
rotatey(45deg):沿y轴顺时针旋转45度。

transform: rotatey(45deg);
transform: rotatex(45deg);
transform: rotatey(45deg);

  div
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background-color: #ff4fe0;
            border:1px solid black;
        }
        .hi
        {
            transform: rotatex(45deg);
        }
    </style>
</head>
<body>

<div>i miss you </div>

<div class="hi">i miss you </div>

在这里插入图片描述
scale():
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
scale（1.5,2）转变宽度为原来的大小的1.5倍，高度为原来的2倍

transform: scale(1.5,2);

skew()：
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
skew(-45deg)：X轴倾斜

 div
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background-color: #ff4fe0;
            border:1px solid black;
        }
        .hi
        {
            transform:translatey(100px);
            /*-webkit-transform:skew(30deg,20deg); /!* Safari and Chrome *!/*/
        }
    </style>
</head>
<body>

<div>i miss you </div>

<div class="hi">i miss you </div>

</body>

在这里插入图片描述
css3的旋转中心：transform-origin
transform-origin: center;

transform-origin: top left;

transform-origin: 50px 50px;
在这里插入图片描述
transform-origin: bottom right 60px;

transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。

一个值：
必须是，，或 left, center, right, top, bottom关键字中的一个。
两个值：
其中一个必须是，，或left, center, right关键字中的一个。
另一个必须是，，或top, center, bottom关键字中的一个。
三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是。它始终代表Z轴偏移量。

keyword	value
left	0%
center	50%
right	100%
top	0%
bottom	100%

一个小案例图片放大：

<style>
        .b{
            width: 400px;
            height: 500px;
            margin: auto;
            overflow: hidden;
        }
        .b>img{
            width: 300px;
            height: 200px;
            transition: all .5s linear;
        }
        .b:hover img{
            transform: scale(1.5);
        }

《二》过渡动画：transition

元素从一种样式逐渐改变为另一种的效果（属性的过渡）
规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间

属性	描述
transition-delay	动画的延迟时间
transition-duration	动画的执行时间
transition-timing-function	动画的执行方式
transition-property	过渡的属性

简写的 transition 属性
transition: width 1s linear 2s;(属性执行时间执行方式延迟时间 )
transition-timing-function：动画的执行方式:
linear 匀速
ease-in 慢慢开始
ease-in-out 慢开始慢结束
transition-property ：过渡的属性
如果要过渡多个属性，就分开写
all：过渡所有属性

.b
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background: #54ffcf;
            margin-left: 0;
            /*/!* transition-delay 动画的延迟*!/
                  transition-delay:1s;
                  /!*transition-duration 动画的执行时间*!/
                  transition-duration: 1s;
                  /!* transition-timing-function动画的执行方式  linear 匀速 ease-in  慢开   ease-in-out 慢开慢关*!/
                  transition-timing-function: linear;
                  /!* transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性*!/
                  transition-property:margin-left;*/
            transition: margin-left 1s 1s linear;
        }
        .b:hover{
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="b">

莓莓儿～

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3动画——2d动画，过渡动画

css3的动画分类： 2d 动画，3d 动画， 2d转3d，过渡动画和帧动画《一》2d转换:transfrom转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。属性描述translate()平移（沿x,y,z轴方向平移 px）rotate()旋转（沿x,y,z轴方向平移 deg）scale()放大skew(变形 deg)trans...
复制链接

扫一扫