ヾ(⌐ ■_■)—CSS动画和弹性布局

naoguaziteng

已于 2022-11-23 20:49:18 修改

阅读量340

点赞数 1

分类专栏：前端基础知识(HTML/CSS/JS) 文章标签： html css

于 2022-11-22 22:42:25 首次发布

本文链接：https://blog.csdn.net/naoguoteng/article/details/127941213

版权

transform:rotate(30deg); 旋转动画，旋转30度（负值为逆时针方向旋转，正值为逆时针方向旋转）
transform:translate(50px,100px) 移动动画，把元素从左侧移动 50 像素，从顶端移动 100 像素（第一个数字控制左右方向，第二个数字控制上下方向！也可以分开控制！如translateX（50px）；translateY（50px）；translateZ（50px）；）
transform:scale(2,4) 图片缩放动画，把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍（数字比一小为缩小图片，数字比一大为放大图片，也可放入单独的数字）
transform:skew(30deg,20deg) 扭曲动画，围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

<html>
  <style>
 #wai {
 				height: 200px;
 				width: 200px;
 				border: 1px black solid;
 				display: flex;
 				/*  垂直居中 */
 				align-items: center;
 				/*  水平居中 */
 				justify-content: center;
 
 			}
 
 			#wai:hover>#nei {
 				-moz-transform-origin: 0% 0%;
                 /*  旋转 */
 				transform: rotate(10deg);

                /*  
                    移动   transform:translate(20px,50px);
                    缩放   transform: scale(1.3,1.3);
                */
 			}
                
 			#nei {
 				-moz-transform-origin: 0% 0%;
 			}
 
 			img {
 				height: 150px;
 				width: 150px;
 			}
 		</style>
 
 	</head>
 	<body>
 		<div id="wai">
 			<div id="nei">
 				<img src="img/pkq.png" alt="">
 			</div>
 
 		</div>
 	</body>
 </html>

2、过渡动画（transition）

格式：transition: transition-property transition-duration transition-timing-function transition-delay;也就是transition: 属性过度时间延时速度(代表匀速);

transition-property有width和height两个属性，可拆开用，也可一块用;transition-timing-function的属性如下：

linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果

最低0.47元/天解锁文章

naoguaziteng

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
ヾ(⌐ ■_■)—CSS动画和弹性布局

一、动画部分1、放大缩小位移（transform）2、过渡动画（transition）3.自定义动画（animation）4.自定义动画案例（漂浮广告）二、流式布局三、弹性盒子布局（Flex布局）流式布局：是页面中元素的宽度按照屏幕分辨率自动进行适配调整，也就是我们常说的适配，它可以保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变，所以流式布局是移动端开发常用的一种布局。最大的特点就是用百分比来调整。弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效
复制链接

扫一扫