transition transform body渐变色的填充方法

transition transform 效果进阶1 body如何渐变色填充

一 transition的拆分写

  • 明确其拥有的四个属性值

    transition-property 发生渐变效果的属性

transition-duration 完成过渡效果的时间

transition- timing-function 完成过渡效果的动画效果 linear ease ease-in ease-out

step-start= step(1 ,start)

step-end=step(1,end)

steps( n1,n2),n1代表完成的步数,n2代表start或者end ,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

transition-deplay 开始进行过渡效果的延迟

  • transition 属性连写

transition :all 2s ease-in 1s

all 代表所有的属性都会有过渡效果,只要设置了,2s代表一个过渡效果的时间,ease-in代表过渡的方式,1s代表延迟

二 transform属性(2d)(x 正方向水平向右,y正方向垂直向下,z正方向在垂直于窗口向外)

  • translate(x,y ) 指定对象移动,基准是父盒子左上角,移动 x y z是代表距离左上角的距离translatex(length|percentage),translatey(number)指定x y的移动距离。如果第二个参数省略,那么默认为0 ;其中百分比的基准是以元素自身的宽高为基准,然后乘以百分比,得到移动的距离值。
    transform:translate(50px,40px)代表向右和向下移动50px 40px;
  • scale(x,y) ,代表指定对象缩放比例,x,y分别对应x y轴的缩放。scalex(number) scaley(number),如果第二个参数省略默认和第一个参数相等。
  • rotate(angle) 输入角度值,代表元素2d的旋转角度 需要有个transition-origin属性。关于旋转的方向:遵循“左手定则”大拇指指向轴的正方向,四指的方向就是旋转的方向,也是角度值为正的方向;rotate(angle),默认以z轴为基准进行旋转,rotatex(angel),rotatey(angle),rotatez(angle) 以x和y轴为基准进行旋转(3D)。注意在3d里面才有rotatex(angel),rotatey(angle),rotatez(angle),在2d里面只有rotate(angle)
  • skew(x,y) 指定x y的扭曲距离。如果第二个参数省略,那么默认为0 ;skewx(number) skewy(number).

三:有关body的渐变色填充问题:

body默认是没有高度的,但是却可以直接给body设置背景颜色,这是为什么呢?好多人会问,不是应该元素有了宽高才能有背景色吗?

这里明确一点,body设置背景色是浏览器自动配置的,即使body的高度是默认的高度。

走个小demo理解下这个问题、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: blue;
            /* background: linear-gradient(to bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));*/
        }
    </style>
</head>
<body>
</body>
</html>

这里写图片描述

body {
    background: linear-gradient(to
bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));
        }   

这里写图片描述

给body一个高度:

height:100px    ;

这里写图片描述

我们会发现的问题是:纯色填充body没有问题,那么如何解决渐变填充body这种情况呢?

很简单,

html,body {
  height :100% ;
}

这里写图片描述

四 ,写个demo玩一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        body{
            background: linear-gradient(to bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));
            box-sizing:border-box;
        }
        .fish {
            width: 174px;
            height: 126px;
            background:url(img/fish.png) no-repeat;
            /*border: 1px solid #000;*/
            transition: all 2s linear;
        }
        body:hover .fish{
            transform:translate(1000px,500px) rotate(45deg) scale(.5,.5);
        } 
        /*背景图片默认左上角平铺,然后改变背景图片的位置即可*/
        .animation {
            animation: autoMove 1s steps(8) infinite;
        }
     /*动画关键字 */

        @keyframes autoMove {
        from {}
          to {
            background-position: 0 -1008px;
          }
        }

    </style>
</head>
<body>
    <div class="fish animation"></div>
</body>
</html>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值