HTML5+CSS3从入门到精通之CSS3转换、过渡和动画
沉沙 2019-03-08 来源 : 阅读 1135 评论 0

摘要:本篇文章探讨了HTML5+CSS3从入门到精通之CSS3转换、过渡和动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之CSS3转换、过渡和动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之CSS3转换、过渡和动画

<

一、转换
1、属性:transform
 取值:none/transform-function(转换函数)
 注意:如果要实现多个转换函数的话,可以用空格分开若干transform-function
2、转换的原点
 默认情况,原点在元素的中心处,width*50%,height*50%
 更换原点-属性:transform-origin:数值/百分比/关键字(top/bottom/left/right)
  取值:按照当前元素的左上点为(0,0)
  一个值:所有轴的位置
  两个值:第一个值表示x轴上的值,第二个表示y轴
  三个值:x,y,z
转换主要分为两类:2D转换和3D转换
(一)2D转换
1、位移:位置移动
 函数:translate()
 取值:数值/百分比(可为负)
   一个值:x轴
   两个值:x轴,y轴
 单向位移函数:translateX(),translateY()
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之位移</title>
 6     <link rel="stylesheet" href="demo05.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2"></div>
11 </body>
12 </html>
复制代码
复制代码
 1 @charset "utf-8";
 2
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*2D变换之位移*/
18     transform: translate(50px,50px);
19 }
复制代码
2、缩放:改变元素尺寸
 函数:scale()
 取值:
   一个值:x轴和y轴同样的缩放比例
   两个值:分别表示x轴和y轴的缩放比例
 可取值:
  默认值为 1
  放大:大于1的数值,可以取小数
  缩小:0-1的数值
 单向缩放函数:scaleX(x),scaleY(y)
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之缩放</title>
 6     <link rel="stylesheet" href="demo06.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2"></div>
11 </body>
12 </html>
复制代码
复制代码
@charset "utf-8";
div{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 200px;
}
#d1{
    border: 1px dotted #000;
}
#d2{
    border: 1px solid #000;
    background-color: #f00;
    opacity: 0.5;
    /*2D变换之缩放*/
    transform: scale(0.8,0.5);    /*缩小*/
    /*transform: scale(1.2);    放大*/
}
复制代码
3、旋转:围绕着一个圆心(转换原点)发生旋转的操作
 函数:rotate(nxdeg)
   n:符号,可正(顺时针)可负(逆时针)
   x:旋转角度的数值
   deg:角度单位
 注意:旋转是连同坐标轴一起转
 
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之旋转</title>
 6     <link rel="stylesheet" href="demo07.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2">Web前端</div>
11 </body>
12 </html>
复制代码
 
复制代码
 1 @charset "utf-8";
 2
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*定义新原点*/
18     transform-origin: 100% 100%;
19     /*2D变换之旋转*/
20     transform: rotate(30deg);
21 }
复制代码
 
4、倾斜:让元素围绕着x轴或y轴,按照一定的角度产生倾斜效果
 函数:skew(nxdeg)
 单向缩放函数:skewX(),skewY()
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-2D变换之倾斜</title>
 6     <link rel="stylesheet" href="demo08.css">
 7 </head>
 8 <body>
 9     <div id="d1"></div>
10     <div id="d2">Web前端</div>
11 </body>
12 </html>
复制代码
复制代码
 1 @charset "utf-8";
 2
 3 div{
 4     width: 200px;
 5     height: 200px;
 6     position: absolute;
 7     top: 100px;
 8     left: 200px;
 9 }
10 #d1{
11     border: 1px dotted #000;
12 }
13 #d2{
14     border: 1px solid #000;
15     background-color: #f00;
16     opacity: 0.5;
17     /*2D变换之倾斜*/
18     transform: skew(45deg,15deg);
19 }
复制代码
(二)3D转换
元素可以沿着z轴,发生各种转换的效果
1、属性
 perspective:模拟人眼到3D视图的距离,取值为数值
 意义:
  1、定义距离
  2、标识元素可以完成3D转换
 注意:该属性要设置在父元素上。即设置完成后,该元素的子元素能够发生3D转换,自身元素是不可以的。
 浏览器兼容性:
  -webkit-perspective
  -moz-perspective
  -o-perspective
2、3D - 位移
 函数:translateZ(z),translate3D(x,y,z)
3、3D - 旋转
 函数:
  rotateX(deg)
  rotateY(deg)
  rotateZ(deg)
  rotate3D(x,y,z,deg)
  x,y,z取值为0和1,0表示该轴不旋转,1表示该轴按照deg的角度进行旋转
 
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3-3D变换之旋转</title>
 6     <link rel="stylesheet" href="demo09.css">
 7 </head>
 8 <body>
 9     <div id="parent">
10         <div id="son">Better late than never.</div>
11     </div>
12 </body>
13 </html>
复制代码
 
复制代码
 1 @charset "utf-8";
 2
 3 #parent{
 4     width: 300px;
 5     height: 300px;
 6     border: 1px solid #ddd;
 7     padding: 10px;
 8     margin: 80px 0 0 150px;
 9     /*设置子级元素,允许发生3D转换*/
10     perspective: 100px;
11     -webkit-perspective: 100px;
12 }
13 #son{
14     text-align: center;
15     width: 200px;
16     height: 200px;
17     line-height: 200px;
18     margin: auto;
19     border: 1px solid #000;
20     background-color: #ddd;
21     margin-top: 50px;
22     /*3D旋转*/
23     transform: rotateX(45deg); /*x轴旋转*/
24     /*transform: rotateY(30deg);*/ /*y轴旋转*/
25     /*transform: rotateZ(60deg);*/ /*Z轴旋转*/
26     transform: rotate3d(1,1,1,30deg); /*整体旋转*/
27 }
复制代码
二、过渡:元素的一个状态到另一个状态的平缓过渡
1、过渡相关属性(要素)
a、过渡属性:transition-property
 能够实现过渡效果的CSS属性:
      颜色:文本颜色,背景颜色
      取值为数值:宽度、高度、字体大小
      转换属性:transform
      渐变属性:background:linear-gradient ....
      visibility:
      阴影:
      透明度:
  b、过渡时间:transition-duration
     整个过渡的效果将在多长时间内完成,以秒(s)或毫秒(ms)作为单位
     注意:默认值为0,整个过渡中,必须要设置transition-duration属性,否则没有过渡效果
  c、过渡时间曲线函数:transition-timing-function
   取值:
    ease:默认值,慢速开始,快速变快,慢速结束
    linear:匀速
    ease-in:慢速开始,加速效果
    ease-out:快速开始,减速效果
    ease-in-out:慢速开始和结束,中间先加速再减速
  d、过度的延迟:transition-delay
   过渡效果什么时候开始,以秒(s)或毫秒(ms)作为单位
  e、过渡的综合属性:
   transition:property duration timing-function delay
   将以上四个过渡属性放在一起,后面两个可以省略
2、触发过渡效果
 a、用户的行为(点击、悬浮)
 b、:hover, :active ...
3、过渡属性定义在什么地方
 div{
width: 100px;
 }
 div:hover{
width: 300px;
 }
复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡</title>
 6     <style>
 7         #d1{
 8             width: 100px;
 9             height: 30px;
10             background-color: #bfb;
11             /*定义过渡效果*/
12             /*在此处定义过渡效果,恢复时仍然有效果*/
13             /*transition-property: width;
14             transition-duration: 1s;
15             transition-timing-function: linear;
16             transition-delay: 100ms;*/
17         }
18         #d1:hover{
19             width: 300px;
20             height: 30px;
21             background: #bfb;
22             /*定义过渡效果*/
23             transition: width 1s ease-in 100ms;
24         }
25         img{
26             /*若将过渡效果定义在此处,则恢复时依然能看到效果            */
27         }
28         img:hover{
29             transform: translate(200px) rotate(720deg);
30             transition: transform 1s linear 100ms;
31         }
32     </style>
33 </head>
34 <body>
35     <div id="d1"></div>
36     <img src="Images/star.jpg">
37 </body>
38 </html>
复制代码
过渡+3D旋转效果
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过渡+3D旋转</title>
    <style>
        #parent{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 1px solid #ddd;
            perspective: 100px;
            margin: 10px auto;
        }
        #son{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #ddd;
            margin: 30px auto;
            transition: transform 5s linear 2s;
        }
        #son:hover{
            transform: rotate3d(1,1,1,360deg);
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">360°旋转</div>
    </div>
</body>
</html>
复制代码
三、动画
1、在多个状态之中,做平缓过渡的效果
2、浏览器兼容性
 -webkit- 谷歌
 -moz- 火狐
 -o- 欧鹏
3、创建使用动画步骤
A、声明动画
a、起名
b、使用 @keyframes 声明动画的关键帧
关键帧:特殊时间点上的状态
B、使用动画
 属性:animation
 通过以上属性调用动画的名称
 设置相关操作
4、声明动画
 通过 @keyframe 声明动画
 语法:@keyframes 动画名称
   {
    from | 0%{
    //动画开始的状态,CSS属性
    width:0px;
    }
    [percent{
    //动画的中间状态
    }]
    10%{
    width:10px;
    }
    20%{
    width:20%;
    }
    to | 100%{
    //动画结束的状态
    width:100px;
    }
   }
5、调用动画
 属性
  a、animation-name:动画名称
  b、animation-duration:动画完成一个周期所需要的时间(s|ms为单位)
  c、animation-timing-function:动画执行过程中的时间速度曲线函数
  取值:ease,linear,ease-in,ease-out,ease-in-out
  d、animation-delay:播放动画之前的延迟
  e、animation-iteration-count:动画播放次数
  取值:
  定数值:播放指定次数
  infinite:无限次
  f、animation-direction:动画播放方向
  取值:
  normal:正常,从头到尾
  alternate:轮播,在奇数次上正向播放,在偶数次上逆向播放
  g、animation:动画的综合属性
  animation:name duration timing-function delay iteration-count direction;(后四个可省略)
  h、animation-fill-mode:动画播放前后元素的状态
  取值:
  none:默认,不改变默认行为
  forwards:动画完成后,保持在最后一个帧的状态
  backwards:动画显示之前,保持在第一个关键帧的状态
  both:结合了forwards和backwards的状态
  i、animation-play-state:设置动画播放状态
  取值:
  paused:暂停
  running:播放
 
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画练习 - 钟表</title>
    <style>
        #circle{
            width: 500px;
            height: 500px;
            border: 3px solid #00f;
            border-radius: 50%;
            margin: auto;
        }
        #hour{
            float: left;
            height: 125px;
            border: 4px solid #bbf;
            position: relative;
            top: 125px;
            left: 250px;
            transform-origin: 0 125px;
            animation: hours 3600s linear 0s infinite;
        }
        #second{
            float: left;
            height: 200px;
            border: 2px solid #00f;
            position: relative;
            top: 54px;
            left: 244px;
            transform-origin: 0 200px;
            animation: seconds 60s linear 0s infinite;
        }
        /*声明动画*/
        @keyframes hours{
            from{
                transform: rotate(0deg);
                /*transform-origin: 0 125px;*/
            }
            25%{
                transform: rotate(90deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(270deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @keyframes seconds{
            from{
                transform: rotate(0deg);
                /*transform-origin: 0 200px;*/
            }
            25%{
                transform: rotate(90deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(270deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="circle">
        <b id="hour"></b>
        <b id="second"></b>
    </div>   
</body>
</html>
复制代码    

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程