css
那一蔚蓝
server 端语言 架构学习,java go
展开
-
css-样式-背景颜色渐变
1、linear-gradient 渐变/* background-image: linear-gradient( pink, green, hotpink); */background-image: linear-gradient( transparent, rgba(0,0,0, .6));原创 2022-05-07 22:23:57 · 251 阅读 · 0 评论 -
css-样式 transform旋转效果
1、rotate按角度旋转 img { width: 250px; transition: all 2s; }img:hover { /* 顺 */ transform: rotate(360deg); /* 逆 */ /* transform: rotate(-360deg); */ }2、转换原点transform-原创 2022-05-07 22:10:23 · 3061 阅读 · 0 评论 -
css-绝对定位元素居中效果
1、 left: 50%; top: 50%; transform: translate(-50%, -50%);(自己本身尺寸的百分比).father {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;/* margin-left: -100px;ma原创 2022-05-06 21:59:26 · 65 阅读 · 0 评论 -
css 样式-位移-基本使用
位移-基本使用1、 transform: translate(x轴, y轴),正值- 向右或者向下 负值-向左或者向上2、注意:百分比 是相对于自己的百分比/* 鼠标移入到父盒子,son改变位置 /.father:hover .son {/ transform: translate(100px, 50px); // 百分比: 盒子自身尺寸的百分比 // transform: translate(100%, 50%); // transform: translate(-100%, 50%);原创 2022-05-06 21:52:05 · 1236 阅读 · 0 评论