CSS3动画&3D转换&边框阴影

一、学习内容

1.CSS3动画

1.1 @keyframes创建动画规则

例如:
    @keyframes boxMove{
            0%{
                transform: translate(0,0);
            }

            50%{
                transform: translate(500px,0) scale(1.5);
            }

            100%{
                transform: translate(500px,500px) scale(0.5);
            }
   }

1.2 animation-name属性

animation-name 属性值为需要调用的@keyframes关键帧名,该属性为必要属性
例如:
    animation-name: boxMove;

1.3 animation-duration属性

与过渡类似,animation-duration 属性值为动画完成一个周期所需要的时间,该属性为必要属性
例如:
    animation-duration: 3s;

1.4 animation-timing-function属性

与过渡类似,animation-timing-function 属性值为速度曲线
    ease 先慢,再快,再慢 (默认值)
    linear匀速
    ease-in:由慢到快。
    ease-out:由快到慢。
    ease-in-out:由慢到快再到慢。
    step-start跳到鼠标开始那帧
    step-end跳到鼠标结束那帧
该属性值同样可以设置 cubic-bezier(0.25, 0.1, 0.41, 0.6)

1.5 animation-delay属性

与过渡类似,animation-delay 属性值为延迟时间,该属性值可以为负值
例如:
    animation-delay: 2s;

1.6 animation-iteration-count属性

animation-iteration-count 属性规定了动画的次数,默认为1,设置infinite为无限循环
例如:
    animation-iteration-count: infinite;

1.7 animation-direction属性

animation-direction 属性规定了动画是否在下一周期逆向播放,默认为normal,不逆向
注意:要使该属性生效,播放次数属性animation-iteration-count必须至少为2

例如:
    animation-direction: alternate; 反向播放

1.8 animation-play-state属性

animation-play-state 属性规定了动画是否正在运行或暂停,默认是running,可以设置pause暂停
例如:
    animation-play-state: pause;

1.9 animation-fill-mode属性

animation-fill-mode 属性规定了动画在最后一帧的状态是否保留,默认为none,可以设置forwards保留
例如:
    animation-fill-mode: forwards;

1.10 animation复合写法

语法:
    animation: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];

2.CSS3D转换

2.1 3D移动

方法:
    translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写
例如:
    translateX(length),translateY(length), translateZ(length)
示例:
    div:hover{
        /*Y轴移动+100px*/
        transform: translateY(100px);
        /*x轴移动+100px*/
        transform: translateX(100px);
        /*x轴,Y轴同时移动+100px*/
        transform: translate3d(100px,100px,0px);
    }

2.2 3D缩放

scale3d(number,number,number) 使元素在这三个纬度中缩放,也可分开写
如:scaleX(),scaleY(),scaleZ()

示例:
     div:hover{
        /*X轴放大为2*/
        transform: scaleX(2);
        /*Y轴缩小为0.5*/
        transform: scaleY(0.5);
        /*x轴,Y轴同时进行缩放*/
        transform: scale3d(2,0.5,1);
    }

2.3 3D旋转

rotate3d(x,y,z,angle):指定需要进行旋转的坐标轴
rotateX(angle) 是元素依照x轴旋转;
rotateY(angle) 是元素依照y轴旋转;
rotateZ(angle) 是元素依照z轴旋转;

示例:
    div:hover{
        /*Y轴方向旋转45度*/
        transform: rotateY(45deg);
        /*X轴方向旋转90度*/
        transform: rotateX(90deg);
        /*x轴和Y轴方向同时进行旋转*/
        transform: rotate3d(1,1,0,45deg);
    }

2.4 perspective属性

perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代,而不是其元素本身。
perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果

例如:
    perspective: 1000px;

2.5 transform-style属性

transform-style:使被转换的子元素保留其 3D 转换(需要设置在父元素中)
属性值:
    flat: 子元素将不保留其 3D 位置-平面方式。
    preserve-3d: 子元素将保留其 3D 位置—立体方式。

3. box-shadow

语法:
    box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];

h-shadow: 水平阴影的位置,允许负值。必须属性值
v-shadow: 垂直阴影的位置,允许负值。必须属性值
blur: 模糊距离。可选
spread: 阴影的尺寸。可选
color: 阴影的颜色。可选
inset: 将默认的外部阴影(outset)改为内部阴影。可选
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇