zoukankan      html  css  js  c++  java
  • 20190404-transition、transform转换、animation、媒体查询

    目录

    1、transition过渡

    1.1简写:transiton:transition-property | transition-duration | transition-timing-function | transition-delay

    1.2transition-poperty(过渡属性):all | none | property;

    1.3transition-duration(过渡持续时间):0 | time;

    1.4transition-timing-function(过渡时间函数):ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(Bézier curve);

    1.5transition-delay(过渡延迟):0 | time;

    2、transform转换

    2.1transform(转换):none | transform-functions;

    2.2translate(平移):translate(x,y)| translate3d(x,y,z);

    2.3scale(缩放):scale(x,y)| scale3d(x,y,z);

    2.4rotate(旋转):rotate(angle)| rotate3d(x,y,z,angle);

    2.5skew(倾斜):skew(x-angle | y-angle);

    2.6perspective(n)(景深):代表眼睛与元素原点的距离,用于确定元素透视灭点位置。其属性值越大,元素的变形越小,灭点与元素的距离越大

    3、animation动画

    3.1简写:animation:animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode;

    3.2animation-name(动画名称):keyframesname | none;

    3.3animation-duration(动画持续时间):0 | time;

    3.4animation-timing-funtion(动画时间函数):ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(Bézier curve)| steps(count | start | end);

    3.5animation-delay(动画延迟时间):0 | time;

    3.6animation-iteration-count(动画重复次数):n | infinite;

    3.7animation-direction(轮流反向播放):normal | alternate;

    3.8animation-paly-state(动画正在运行或暂停):paused | running;

    3.9animation-fill-mode(动画最后一帧):none | forwards | backwards | both;

    4、媒体查询

    4.1概念:用于实现响应式设计,针对不同的媒体类型定义不同的样式

    4.2引入方法

    4.2.1link元素:<link rel="stylesheet" media="mediatype logical operator(media feature)" href="index.css"/>(增加页面http的请求次数)

    4.2.2css样式表:@media mediatype logical operator(media feature) {CSS Code }

    4.3媒体类型(mediatype)

    4.4逻辑操作符(logical operator)

    4.5媒体属性(media feature)

    内容

    1、transition过渡

    1.1简写:transiton:transition-property | transition-duration | transition-timing-function | transition-delay

    1.2transition-poperty(过渡属性):all | none | property;

    1.3transition-duration(过渡持续时间):0 | time;

    1.4transition-timing-function(过渡时间函数):ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(Bézier curve);

    1.5transition-delay(过渡延迟):0 | time;

    2、transform转换

    2.1transform(转换):none | transform-functions;

    2.2matrix(矩阵):matrix(n,n,n,n,n,n)  | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);

    2.3translate(平移):translate(x,y)| translate3d(x,y,z);

    CSS Code

    div.box{
              width: 100px;
              height: 100px;
              background: olive;
              transform: translateX(50px);
    }

    HTML Code

    <div class="box">这是一个测试box</div>

    Result

    2.4scale(缩放):scale(x,y)| scale3d(x,y,z);

    CSS Code

    div.box{
              margin: 300px;
              width: 100px;
              height: 100px;
              background: olive;
              transform: scale(1.5);
    transform:scale(0.5); }

    HTML Code不变

    Result

     

    2.5rotate(旋转):rotate(angle)| rotate3d(x,y,z,angle);

    CSS Code

    transform: rotate(45deg);

    HTML Code不变

    Result

    2.6skew(倾斜):skew(x-angle | y-angle);

    CSS Code

    transform: skewX(45deg);

    HTML Code不变

    Result

    2.7perspective(n)(景深、透视):代表眼睛与元素原点的距离,用于确定元素透视灭点位置。其属性值越大,元素的变形越小,灭点与元素的距离越大

    2.7.1透视:分单点透视、两点透视、三点透视

    2.7.2灭点:指立体图形各条边的延伸线所产生的相交点,透视点的消失点

    如:一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致!!

    2.7.3translateZ帮忙理解透视

    对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。

    https://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html

    2.7.4perspective的两种写法

    一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。

    .stage {
        perspective: 600px;
    }

    以及:

    #stage .box {
        transform: perspective(600px) rotateY(45deg);
    }
    多个元素下两种书写的对比

    2.7.5perspective-origin:默认就是所看舞台或元素的中心

    perspective-origin:25% 75%;

    2.8transform-style(开启3d舞台):flat | preserve-3d;

    2.9backface-visibility(隐藏透视后元素,如上图橘黄色):visible | hidden;

    2.0各种demo:

    图片旋转木马demo

    3d开门demo

    参考文献:https://www.cnblogs.com/yangyang63963/p/5859913.html?utm_source=itdadao&utm_medium=referral

    3、animation动画

    3.1简写:animation:animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode;

    可以使用多个动画,用逗号隔开,用于同个元素使用不同属性进行不同帧的动画

    3.2animation-name(动画名称):keyframesname | none;

    3.3animation-duration(动画持续时间):0 | time;

    3.4animation-timing-funtion(动画时间函数):ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(Bézier curve)| steps(count | start | end);

    3.4.1贝塞尔曲线可视化

    3.4.2帧动画steps

    3.4.2.1除了steps之外的过渡函数会为其插入补间,但有些效果只需要关键帧之间的跳跃,类似于手翻书动画,则可使用steps()

    3.4.2.2steps函数指定一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数),第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

    3.4.2.3step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;

    3.4.2.4step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end

    3.4.2.5steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,而不是keyframes写的变化次数,其工作机制如下图

    如:steps(5,start)中的5,是0%-25%之间变化五次,而不是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分

    3.4.2.6在使用定位平移背景图使其水平运动时,需正向即从左到右进行平移,而不能倒置从右到左,否则会产生类似跳频的效果

    参考文献:http://www.cnblogs.com/aaronjs/p/4642015.html#undefined

    3.5animation-delay(动画延迟时间):0 | time;

    3.6animation-iteration-count(动画重复次数):n | infinite;

    3.7animation-direction(轮流反向播放):normal | alternate;

    要求animation-iteration-count大于2

    3.8animation-paly-state(动画正在运行或暂停):paused | running;

    3.9animation-fill-mode(动画最后一帧):none | forwards | backwards | both;

    案例demo

    3-1丝带导航

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
         *{
              margin: 0px;
              padding: 0px;
         }
         body{
              background: olive;
         }
         nav{
              position: relative;
              display: flex;
              margin: 30px auto;
              width: 380px;
              height: 48px;
              /*background: olive;*/
         }
         nav:before,nav:after{
              content: "";
              display: inline-block;
              width: 0px;
              height: 0px;
              border-top: 24px solid #fff;
              border-bottom: 24px solid #fff;
         }
         nav:before{
              position: absolute;
              left: -48px;
              border-left: 24px solid olive;
              border-right: 24px solid #fff;
         }
         nav:after{
              position: absolute;
              right: -48px;
              border-right: 24px solid olive;
              border-left: 24px solid #fff;
         }
         nav a span{
              position: relative;
              display: inline-block;
              width: 95px;
              height: 48px;
              vertical-align: 48px;
              text-decoration: none;
              color: #000;
              background: #fff;
              text-align: center;
              line-height: 48px;
         }
         nav a span:before,nav a span:after{
              display: none;
              position: absolute;
              bottom: -8px;
              content: "";
              width: 0px;
              height: 0px;
              border-top: 4px solid #9B8651;
              border-bottom: 4px solid #fff;
         }
         nav a span:before{
              left: 0px;
              border-right: 4px solid #9B8651;
              border-left: 4px solid #fff;
         }
         nav a span:after{
              right: 0px;
              border-right: 4px solid #fff;
              border-left: 4px solid #9B8651;
         }
         nav a:hover > span{
              transform: translateY(-8px);
              background: #FFD204;
              transform: all 2s linear;
         }
         nav a:hover > span:before,nav a:hover > span:after{
              display: block;
         }
        </style>
    </head>
    <body>
        <nav>
              <a href="#" class="navlist"><span>HTML</span></a>
              <a href="#" class="navlist"><span>CSS</span></a>
              <a href="#" class="navlist"><span>JavaScript</span></a>
              <a href="#" class="navlist"><span>Ajax</span></a>
         </nav>
    </body>
    </html>
    View Code

    查看效果

    3-2闪过效果

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Flicker</title>
        <style type="text/css">
         *{
              margin: 0px;
              padding: 0px;
         }
         body{
              margin: 100px;
              background: olive;
         }
         
         div.flicker,div.flicker-words{
              position: relative;
              overflow: hidden;
              width: 300px;
              height: 100px;
              background: repeating-linear-gradient(to bottom right,#3B50D0,#32436A 20%,#3B50D0 50%);
              border-radius: 10px;
              text-align: center;
              line-height: 100px;
         }
         div.flicker:before{
              position: absolute;
              left: -330px;
              content: "";
              display: inline-block;
              width: 300px;
              height: 100px;
              background: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
              transform: skewX(25deg);
         }
         div.flicker-words span{
              text-align: center;
               /* 背景颜色线性渐变 */
                   /* 老式写法 */
                       /* linear为线性渐变,也可以用下面的那种写法。left top,right top指的是渐变方向,左上到右上 */
                       /* color-stop函数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。所以本次渐变为两边灰色,中间渐白色 */
               background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
                   /* 新式写法 */
               /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */
    
               /* 设置为text,意思是把文本内容之外的背景给裁剪掉 */
               -webkit-background-clip: text;
               /* 设置对象中的文字填充颜色 这里设置为透明 */
               -webkit-text-fill-color: transparent;
               /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */
               -webkit-animation: animate 1.5s infinite;
         }
         @-webkit-keyframes animate {
               /* 背景从-100px的水平位置,移动到+100px的水平位置。如果要移动Y轴的,设置第二个数值 */
               from {background-position: -100px;}
               to {background-position: 100px;}
               }
               @keyframes animate {
                    from {background-position: -100px;}
                    to {background-position: 100px;}
               }
         div.flicker:hover:before{
              left: 600px;
              transition: 1s;
         }
         div.flicker-img{
              position: relative;
              width: 198px;
              overflow: hidden;
         }
         div.flicker-img:before{
              position: absolute;
              left: -198px;
              content: "";
              display: inline-block;
              width: 198px;
              height: 170px;
              background: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
         }
         div.flicker-img:hover:before{
              left: 400px;
              transition: 1s;
         }
        </style>
    </head>
    <body>
        <!-- img -->
         <div class="flicker-img"> <img src="images/flicker.jpg" alt=""></div>
        
         <!-- div -->
         <div class="flicker"></div>
         <!-- words -->
         <div class="flicker-words"><span>我是一闪而过的Flicker</span></div>
    </body>
    </html>
    View Code

    查看效果

    3-3小米悬停及评论上浮

    查看效果

    4、媒体查询

    4.1概念:用于实现响应式设计,针对不同的媒体类型定义不同的样式

    4.2引入方法

    4.2.1link元素:<link rel="stylesheet" media="mediatype logical operator(media feature)" href="index.css"/>(增加页面http的请求次数)

    4.2.2css样式表:@media mediatype logical operator(media feature) {CSS Code }

    4.3媒体类型(mediatype)

    4.3.1all:用于所有设备

    4.3.2print:用于打印机和打印预览

    4.3.3screen:用于电脑屏幕、平板电脑、智能手机等

    4.3.4speech:用于屏幕阅读器等发声设备

    4.4逻辑操作符(logical operator)

    4.4.1and:多个媒体属性组合成一条媒体查询,只有当每个属性都为真时,则生效(常用)

    4.4.2or或,:任一媒体查询返回真,则生效

    4.4.3not:应用于整个媒体查询,在其为假时生效,在逗号媒体查询列表中not仅否定它应用到的媒体查询

    4.4.4only:仅在媒体查询匹配成功时生效

    4.5媒体属性(media feature)

    4.5.1"min-"与"max-",用于表达"小于等于"和"大于等于",避免了使用html的"<"与">"冲突

    4.5.2必须用括号()包起来,否则无效

  • 相关阅读:
    redhat7 安装 mysql5.7
    python django 网站局域网问
    SQLiteStudio
    升级gcc到gcc-8.1.0
    [SAP HANA ]fulltext index
    [ORACLE] SNC 学习
    [oracle]sqlplus 输出格式化print_table学习
    win-->linux 文本转换
    [ORACLE]ORA-03113: end-of-file on communication channel
    ORACLE 在线重定义分区表
  • 原文地址:https://www.cnblogs.com/nightnight/p/10667195.html
Copyright © 2011-2022 走看看