资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS 小结笔记之变形、过渡与动画

CSS 小结笔记之变形、过渡与动画

番茄西红柿 / 1531人阅读

摘要：变形变形移动移动可以指定像素值也可以指定百分比，注意指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐在设置后再移动自身的即可。方向上的移动在现实生活中是距离变远，距离变近。

1、过渡 transition 

过渡属性用法： transition :ransition-property  transition-duration  transition-timing-function transition-delay 

可以一起指定也可以分别多带带指定

 

  • transition-property: 是要过渡的属性（如width，height），all是所有都改变。
  • transition-duration：花费的时间，单位为s或ms
  • transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种
　　　　ease=>逐渐慢下来（默认值） linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速 
  • transition-delay 延迟时间，单位为s或ms
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>Documenttitle>
    <style>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。

2、变形 transform

(1)、2D变形

　　（a）移动 translate(x,y)

　　　　　　移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        div:active {
            transform: translate(200px, 200px);
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

　　　　　　

　　　　　　点击之后盒子进行了移动。用于让定位的盒子居中的代码入下

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>Documenttitle>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    style>
head>

<body>
    <div class="fa">
        <div class="son">div>
    div>

body>

html>
View Code

　　　　　　结果为　　　　　

　　　　　

　　（b）缩放 scale（x，y）

　　　　　　x,y设置大于1 是放大，小于1 是缩小。

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>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    style>
head>

<body>
    <div>

    div>
body>

html>
View Code

　　　　　　

　　（c）旋转 rotate(x deg)

　　　　　x指定度数值，正数是顺时针旋转，负数是逆时针旋转。

　　　　旋转可以使用transform-origin 指定旋转中心点，transform-origin 给left top right bottom 也可以指定具体的像素值。

　　　　　　

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>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

　　　　　　

　　（d）倾斜 skew（x deg ,y deg）

　　　　　　　　x,y分别指定倾斜在x，y方向上的角度，可以为负数。y值不写默认为0。

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>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

　　　　　　

（2）3D变形

　　（a）旋转（rotateX,rotateY,rotateZ）

　　　　3D旋转与2D类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以多带带指定。

　　　　

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>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

　　（b）移动（translateX，translateY，translateZ）

　　　　3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。

　　　　要使Z方向上移动生效首先要设置perspective（眼睛距离屏幕的距离）;

　　　　

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>Documenttitle>
    <style>
        body {
            perspective: 1000px;
            /* 数值越小说明眼睛离的越近 */
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    style>
head>

<body>
    <div>

    div>
body>

html>
View Code

　　　　

3、动画 animation　

　　（1）、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode; 　　　animation-name:动画名称（自己使用@keyframes 定义的动画） 　　　animation-duration：持续时间 　　　animation-timing-function：运动曲线，与过渡的运动曲线类似。 　　　animation-delay：延迟时间 　　　animation-iteration-count：循环次数 （infinite 是无限循环） 　　　animation-direction　：是否反向（动画是否是由结尾倒开是倒着放的） 　　　animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态） 　　　animation-play-state：设置动画状态 running 开始|paused 暂停 　　（2）、@keyframes 自定义动画 　　　　格式如下　　　　　 
@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}

可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。

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>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    style>
head>

<body>
    <div>div>
body>

html>
View Code

　　　

 

　　

 

GPU云服务器 云服务器 翻转过渡动画 ios过渡动画 jquery过渡动画 css过渡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1782.html

相关文章

  • Css3 笔记 动画 和定位属性

    摘要：属性决定元素如何定位，通过实现位置的改变默认值，元素按照标准流的方式正常排列。绝对定位，不受父元素父容器限制。可以设置元素的叠加顺序，但依赖定位属性大的元素会覆盖小的元素为的元素不参与层级比较为负值，元素被普通流中的元素覆盖  transform 变形属性属性：translate 平移，rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个...

    Tony_Zby 评论0 收藏0

  • CSS3学习笔记

    摘要：只对英文起作用，以单词作为换行依据。换句话说，字符串与属性值中的任意位置相匹配。其主要有两个值和。主要具有四个属性值和。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。 1.文档换行 a.强制一排显示文本，多出的地方切割文本，并加上省略号，三句真言 text-overflow:ellipsis; /*实现溢出时产生省略号的效果, 或者clip表示剪切*/ overflow:h...

    Flink_China 评论0 收藏0

  • css3中的变形（transform）、过渡（transition）、动画（animation）属性

    摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。 一、 CSS3变形（transform） 语法： transform ： no...

    waruqi 评论0 收藏0

  • css过度与动画

    摘要：综上，上面的代码的值都应该加上，即逐帧动画在实现一个卡通影片或者一个复杂的进度指示框，或者的标志时这种场景比较适应逐帧动画。这种平滑特性不适用于逐帧动画的实现。 缓动效果 回弹动画效果是比较常见的动画，比如小球的运动、对于尺寸变化和角度变化使用回弹效果可以增强动画的体验。小面介绍一些简单的缓动效果的动画。 弹跳动画的实现 css中所有过渡和动画都是跟一条曲线（缓动曲线）有关的，这条曲线...

    Kross 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<