变形、过渡以及动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div1{
        width: 300px;
        height: 300px;
        background-color: lawngreen;
        transform:  matrix(0,1,1,1,10,10);
    }
    .div2{
        width: 200px;
        height: 200px;
        /* transform: translate(100%,10px); */
        background-color: lightgreen;
        transform: translate(10px);
    }
    .div3{
        width: 200px;
        height: 200px;
        background-color: lightsalmon;
        transform: scale(.8);/*缩小到原来的80%*/
    }

   .div4{
        width: 200px;
        height: 200px;
        background-color: brown;
        transform: rotate(45deg);
   }
   .div5{
        width: 200px;
        height: 200px;
        background-color: crimson;
        transform: skew(45deg);
   }
</style>
<body>
   <div class="div1"></div> 
   <div class="div2"></div>
   <div class="div3"></div>
   <div class="div4">七七</div>
   <div class="div5"></div>
   
</body>
</html>

效果如下：

3.中心点

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。

transform-origin: x-axis y-axis z-axis;

二、css过渡（transition）效果

1、transition-property属性：

         none：没有过渡效果
         all：所有属性都可以获得过渡效果
         property：指定采用过渡效果的属性名,若是多个属性用逗号隔开

2、transition-duration属性：

指定对象过渡的持续时间,单位是秒(s)或毫秒(ms)transition-duration: time

3、transition-timing-function属性：设置过渡效果的速度曲线

        linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
       ease：默认值,平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
       ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
       ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
       ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
       cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 300px;
        height: 180px;
        margin-top: 100px;
        margin-left: 100px;

    }
    .div1>img{
        transition-property: all;
        transition-duration: 4s;
        border: hotpink 2px solid;
    }

    .div1>img:hover{
        /* background-image: image(); */
        border-radius: 50%;
        box-shadow: indigo 5px 3px 5px;
    }
    .div2{
        overflow: hidden;
        border-radius: 10px;
        border: #000 2px solid;
    }
    .div2>img{
        transition-property: all;
        transition-duration: 4s;
        transition-delay: 2s 0s 1s;
        width: 200px;
        height: 120px;
    }
    .div2>img:hover{
        width: 300px;
        height: 180px;
        box-shadow: indigo;
    }
</style>
<body>
   <div>
        <div class="div1">
            <img src="../images/1.jpg" class="c1" width="300px" height="180px">
        </div>
        <div class="div2">
            <img src="../images/mao1 (1).jpg" alt="">
        </div>
    </div>
</body>
</html>

因为是动态效果所以不做图片演示；

三、变形和过渡的区别

1、变形能够设置对象的中心点;过渡默认是对象的左上角,不能改变
2、过渡效果是针对元素的属性进行的改变;变形是针对整个元素进行的改变
3、过渡效果可以设定过渡的时间、曲线、延迟等;变形不能设置,变形是瞬间完成的变化
4、过渡、变形都不会对其他元素的布局产生影响
5、两者一般都会设置触发的条件

四、动画效果

1.创建动画：

        @keyframes 动画名称{
       keyframes-selecter :{ css-styles}
       }

(1)动画名称：

是CSS动画的唯一标识,不能为空。引用动画时通过该名称引用

(2)keyframes-selecter：

关键帧选择器,表示当前关键帧在整个动画中的位置;取值可以是百分比、from 、to
from和0%含义是相同的
to和100%的函数时相同的

(3)css-styles

在当前关键帧时的动画状态。多个属性用分号分隔，不能为空

2、动画的属性：

animation-name：动画名称,不能省略。用于引用动画
animation-duration：<time> 指定动画的持续时间,单位可以是秒(s)或毫秒(ms)
animation-timing-function：设置动画的过渡类型,取值如下：

linear：线性过渡
ease：平滑过渡
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。

animation-delay：动画的延迟时间
animation-iteration-count：动画的循环运行次数,默认是0
animation-direction: 动画运行的方向,取值如下：

normal：正常方向
alternate：正常与反向交替

animation-play-state ：设置动画的状态

running：运动
paused：暂停

animation-fill-mode 设置动画之外的状态

none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
div{
    display: block;
    height: 431.95px;
     width: 300px;
    border: 3px solid red;
}
@keyframes cc1{
    0%{left:0px;
        top: 0px;}
    25%{left: 400px;
    top: 200px;
    /* background: chartreuse; */
border-radius: 0px;}

    50%{left: 400px;
    top: 200px;
/* background: aquamarine; */
border-radius: 50%;}
    75%{left:400px;
    top: 0px;
/* background: blanchedalmond; */
border-radius: 0;
box-shadow: 5px 3px 5px;}
    100%{left:0px;
    top: 0px;
/* background: chocolate; */
border-radius: 0;}
}
div{
    position: absolute;
    /* transform: translate(50px); */
    animation: cc1 10s ease-out;
    background: url(../images/diluc\ \(7\).jpg );
    background-size: 100%;

}
</style>
<body>
    <div>
        <!-- <img src="../images/diluc (7).jpg" width="" id="d0"> -->
    </div>
</body>
</html>

迪卢克的现任

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变形、过渡以及动画效果

一、css变形（transform）效果1、CSS3中实现变形的优点：(1)不需要加载额外的文件(flash文件) (2)提供开发效率(3)提高页面的执行速度2.transform属性中的变形函数transform:none | transform-functionnone：不变形transform-function：指定变形函数1.matrix(<number>,<number>,<n...
复制链接

扫一扫