我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

前端-毛少涵20221123

[复制链接]
微小星晨 发表于 2022-11-28 18:36:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日学习内容:
css3
css32D转换
属性transform
属性值translate(x,y)对盒子进行X轴Y轴位移translatex()  translatey()
旋转 属性值rotate  语法transform:rotate(度数deg) 正数顺时针 负数逆时针旋转
转换中心点
transform-origin:x y;使用具体像素值设置,参照点是左上角
也可以使用方位名词来进行中心点设定,方位名词有:right/left/center/top/bottom
缩放
transform:scale(n); 一个数表示宽高都放大几倍,两个数前一个宽第二个高,小数表示缩小
scale缩放和width/height设置盒子大小的区别     
width/height设置宽高是,上沿不动,只向下来改变宽高,会对其他的盒子有影响
scale进行缩放时,默认以盒子的中心点来进行缩放,并且不会影响其他的盒子
css3的动画制作
动画序列
1、0%是动画的开始,100%是动画的结束
2,在 @keyframes 中固定css的样式,可以创建由当前样式转化为新样式的动画效果 (keyframes 叫做关键帧)
3、可以改变任意多的样式和任意多的次数
4、可以使用百分比来规定变化发生的时间,或者使用关键字“from”和“to”来实现一般不用, 等同于0%~100%
动画制作的步骤
1、定义动画
@keyframes xiong{
  0%{transform: translate(0);}
100%{transform: translate(-1600px); }}
2、调用动画.bearimg{animation: xiong 1.5s steps(8) infinite; }
动画的属性
调用动画的属性 必须 animation-name: move;
完成一个动画周期所花费的时间 必须属性  animation-duration: 1s;
动画的速度曲线 animation-timing-function: ease;
规定动画的何时开始 延迟animation-delay: 0s;
规定动画的播放次数无限循环 animation-iteration-count:infinite;
规定动画是否在下一个周期逆向播放,默认值normal  alternate代表逆向播放animation-direction: alternate;
规定动画结束后的状态,如果保持结束后的状态用forwards, 如果要回到初始状态backwards
animation-fill-mode: forwards;不能与循环和逆向同时使用
       div:hover{鼠标移动到div上,动画暂停animation-play-state: paused;}
       步长steps()
指定了将整个动画分成多少步来完成,如果有steps() 就不需要其他的运动曲线属性值了
今日问题:无


回复

使用道具 举报

关注0

粉丝0

帖子50

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026