侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

动画

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 121 阅读 / 2,032 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / 动画

show
hidden
fadein
fadeout
slideup
slidedown

旋转
transform:rotate(45deg);
扭曲
transform:skew(Xdeg,Ydeg)
例子: transform:skew(30deg,10deg);
缩放
transform:scale(0.5,0.8)
缩放,参数对应着两个轴的缩放比例,第一个参数控制水平比例,第二个控制竖直比例.
平移
transform:translate(x(px),y(px));
第一个参数是左右平移多远,第二个是上下平移多远.
定义原点
transform-origin:left top | 0% 0%
CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
过渡属性 transition-property
transition-property:指定过渡或动态模拟的CSS属性(一般写all)
transition-duration:指定完成过渡所需的时间(s)
transition-timing-function:指定过渡函数
不用加括号 ease: 由快到慢 linear: 恒速 ease-in: 速度越来越快 ease-out: 越来越慢 ease-in-out: 先快再慢
transition-delay:指定开始出现的延迟时间(s)
例子
div {
	width: 200px;
	height: 200px;
	background: red;
	margin: 20px auto;
	transition-property: all;
	transition-duration:.5s;
	transition-timing-function: ease-in;
	transition-delay:0.2s;
}
div:hover {
	width: 400px;
	height:300px;
}
关键帧动画
定义关键帧
@keyframes changecolor{ 0%{ background: red; } 50%{ background: green; } 100%{ background: blue; } }
使用定义的关键帧
animation-name:changecolor;
动画循环次数
animation-iteration-count:infinite;
动画播放方向
animation-direction:alternate; //normal一直向前,alternate动画播放在第偶数次向前播放,第奇数次向反方向播放。
可以写在一起
animation: changecolor 5s ease-out 0.2s infinite alternate;
设置动画的播放状态
animation-play-state:paused;
animation-play-state:running;
动画播放完之后
animation-fill-mode
例子
<!DOCTYPE  html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
        @keyframes around {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(180px);
            }
            50% {
                transform: translate(180px, 180px);
            }
            75% {
                transform: translate(0, 180px);
            }
            100% {
                transform: translateY(0);
            }
        }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        margin: 20px auto;
    }

    div span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: orange;
        border-radius: 100%;
        animation-name: around;
        animation-duration: 10s;
        animation-timing-function: ease;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-play-state: paused;
    }

    div:hover span {
        animation-play-state: running;
    }
&lt;/style&gt;

</head>
<body>
<div><span></span>简写看一下</div>
</body>
</html>




0

评论区