携程前端网站开发团队,郑州专业网站制作,html购物网站模板,新闻列表做的最好的网站2D转换
1.移动 translate
1. 语法
transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n); 2.重点 定义 2D 转换中的移动#xff0c;沿着 X 和 Y 轴移动元素 translate最大的优点#xff1a;不会影响到其他元素的位置 translat…2D转换
1.移动 translate
1. 语法
transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n); 2.重点 定义 2D 转换中的移动沿着 X 和 Y 轴移动元素 translate最大的优点不会影响到其他元素的位置 translate中的百分比单位是相对于自身元素的 translate:(50%,50%); 对行内标签没有效果 例子使一个盒子水平垂直居中 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {position: relative;width: 500px;height: 500px;background-color: blue;}p {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
background-color: pink;
transform: translate(-50%,-50%);}/style
/head
bodydivP/P/div
/body
/html 2.旋转 rotate 2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。 1. 语法 transform:rotate( 度数 ) 2. 重点 rotate里面跟度数 单位是 deg 比如 rotate(45deg) 角度为正时顺时针负时为逆时针 默认旋转的中心点是元素的中心点 例子三角 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after{content: ;
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right:1px solid #000 ;
border-bottom:1px solid #000 ;
transform: rotate(45deg);
transform: all 0.2s;}div:hover::after {transform: rotate(225deg);}/style
/head
bodydiv/div
/body
/html 鼠标一放由此 变成 3.转换中心点 transform-origin 我们可以设置元素转换的中心点 1. 语法 transform-origin: x y; 2. 重点 注意后面的参数 x 和 y 用空格隔开 x y 默认转换的中心点是元素的中心点 (50% 50%) 还可以给x y 设置 像素 或者 方位名词 top bottom left right center 案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;margin: 10px;float: left;}div::before {content: 回村的诱惑;display: block;width: 200px;height: 200px;background-color: hotpink;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.2s;}div:hover::before {transform: rotate(0deg);}/style
/head
bodydiv/divdiv/divdiv/divdiv/div
/body
/html 屏幕录制 2024-03-29 103150 4.转换之缩放scale 缩放顾名思义可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。 1. 语法 transform: scale( x,y); 2. 注意 注意其中的x和y用逗号分隔 transform:scale(1,1) 宽和高都放大一倍相对于没有放大 transform:scale(2,2) 宽和高都放大了2倍 transform:scale(2) 只写一个参数第二个参数则和第一个参数一样相当于 scale(2,2) transform:scale(0.5,0.5)缩小 sacle缩放最大的优势可以设置转换中心点缩放默认以中心点缩放的而且不影响其他盒子 分页案例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul li {float: left;width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid red;border-radius: 50%;list-style: none;margin: 10px;cursor: pointer;transition: all 0.1s;}li:hover {transform: scale(1.3);}/style
/headbodyulli1/lili2/lili3/lili4/lili5/lili6/lili7/li/ul
/body/html 5.2D 转换综合写法 注意 1. 同时使用多个转换其格式为transform: translate() rotate() scale() ...等 2. 其顺序会影转换的效果。先旋转会改变坐标轴方向 3. 当我们同时有位移和其他属性的时候记得要将位移放到最前 动画 1.先定义动画 2.再使用调用动画 1. 用keyframes 定义动画类似定义类选择器 keyframes 动画名称 {0%{width:100px;} 100%{width:200px;}
} 2. 元素使用动画 div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;} 3.常用属性 4.简写属性 animation: myfirst 5s linear 2s infinite alternate; animation动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态; 简写属性里面不包含 animation-play-state 暂停动画animation-play-state: puased; 经常和鼠标经过等其他配合使用 想要动画走回来 而不是直接跳回来animation-direction alternate 盒子动画结束后停在结束位置 animation-fill-mode forwards animation动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态; 5. step案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {overflow: hidden;font-size: 20px;width: 0;height: 30px;white-space: nowrap;background-color: skyblue;animation: o 4s steps(8) forwards;}
keyframes o {0%{width: 0;}100% {width: 160px;}
}/style
/head
bodydiv前途似海来日方长/div
/body
/html
