admin 管理员组文章数量: 888526
8.17css3
文章目录
- 线性渐变
- 地板砖
- 发廊灯：重复渐变
- 文字渐变效果，以文字裁剪
- 光斑移动
- 径向渐变
- 重复径向渐变
- 径向渐变小（就是两颜色之间没有渐变）
- 过度动画
- 动画的触发方式
- 2D变换：transform
- 旋转：transform:rotate()
- 扭曲：transform:skew()
- 缩放：transform:scale
- 移动：transform:translate()
线性渐变
1、线性渐变：直接书写两个颜色值，那么就会在0到100%之间，由上至下，进行线性渐变
background:linear-gradient(red,green)
2、无论直接写多少个颜色值，都会平分然后渐变
background：linear-gradient(red,yeelow,pink,grey);
3、从左到右：to right
linear-gradient(to right,red,blue);
4、对角：to left top
linear-gradient(to left top,red,blue);
5、也可以自定义，y轴的上方向是0度方向，顺时针方向
background: linear-gradient(45deg,deeppink,greenyellow);
background: linear-gradient(270deg,deeppink,greenyellow);
6、在每一个颜色值的后边添加百分比，可以控制这个颜色怎么过度
background: linear-gradient(to left,red 0%,green 20%,yellow 40%, pink 60%, blue 80%, grey 100%);
7、当百分比不是由0开始 或不是100 结束 ，只有在百分比区域过度，其他区域显示最近的颜色
background: linear-gradient(to left,yellow 40%, pink 60%);
8、渐变小就是颜色之间没有间隙，不会过度
background: linear-gradient(to right,red 50%,#fff 50%
地板砖
两个背景图叠加：写在前面的会在最上面，那么上面就可以写透明的
background: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%；
发廊灯：重复渐变
background: repeating-linear-gradient
background: repeating-linear-gradient(45deg,#fff 0px,#fff 10px,#000 10px,#000 20px);transition: all 20s linear;
文字渐变效果，以文字裁剪
文字颜色设为透明
-webkit-background-clip: text;
color: transparent;
background: linear-gradient(45deg,hotpink,brown,greenyellow);
/*背景图裁剪，以文字裁剪*/
-webkit-background-clip: text;
光斑移动
color: rgba(255,255,255,.5);
background: linear-gradient(135deg,#000 180px,#fff 210px,#000 240px);
-webkit-background-clip: text;
animation: move 1s linear infinite;
@keyframes move {0%{background-position: 0 0;}100%{background-position: 1000px 0;}
径向渐变
1、默认百分百在离圆心的最远角，可以设置圆心的位置
background: radial-gradient(at center center,deeppink,deepskyblue);background: radial-gradient(at 50px center,deeppink,deepskyblue);
2、我们自己也可以设置百分百的的位置
closest-side、closest-corner、farthest-side、farthest-corner
background: -webkit-radial-gradient(150px 80px,closest-side,deeppink,deepskyblue);
重复径向渐变
background: repeating-radial-gradient()
background: repeating-radial-gradient(deeppink 0%,deepskyblue 10%);
径向渐变小（就是两颜色之间没有渐变）
background: radial-gradient(at center center,red 30%,#fff 30%,#fff 60%,red 60%);
过度动画
1、要过度的属性，如果全部则写all：transition-property：all
transition-property: width,height;
transition-property: all;
2、动画持续时间：transition-duration：3s
transition-duration: 3s;
3、动画过度类型：transition-timing-function：linear；
transition-timing-function: linear;
transition-timing-function: cubic-bezier(.95,-0.67,.88,-0.4);
4、动画延迟时间：trasition-dalay：5s
transition-delay: .5s;
5、和写
transition：all 2s linear .5s;
动画的触发方式
首先是谁的样式改变就谁就要写transition：all 1s
谁的样式里有transition就意味着只要样式一改变，就会触发动画
1、可以写在自己的样式里
.box{width: 100px;height: 100px;background: green;transition: all 1s;}
2、也可以写在另一个样式class里，然后在js里把这个class加给它
.red{background: red;transition: all 1s;}oBox.className = "box red";
3、或者直接在js里写给它
oBox.style.transition = "all 1s";
2D变换：transform
旋转：transform:rotate()
1、rotateX:沿着X轴旋转 当值为正的时候 顶部超里旋转 当值为负的时候 顶部超外旋转
transform: rotateX(-30deg);
2、rotateY:沿着Y轴旋转 当值为正的时候 左侧超外旋转 当值为负的时候 左侧超内旋转（方向有点和正常的不太一样，要记住）
3、rotate(度数) 元素默认直接沿着中心点 顺时针（值为正）或逆时针（值为负）旋转，中心点可以改变：transform-origin: left top;
transform: rotate(360deg);
扭曲：transform:skew()
1、skewX是沿着X轴控制扭曲 当值为正 头向左边扭 否则头向右边扭
transform: skewX(30deg);
2、skewX是沿着X轴控制扭曲 当值为正 左侧向上扭 否则左侧向下扭
3、skew(度数)是合写
两个参数 一个是x一个是y
transform: skew(30deg,50deg);
如果只有一个值，默认x
transform: skew(30deg);
缩放：transform:scale
1、scaleX默认沿着中心点 缩放 相对自身大小
transform : scaleX(0.8);
2、scaleY默认沿着中心点 缩放
transform : scaleY(1.1);
3、scale()和写
scale跟两个值得时候，代表x和y缩放
transform : scale(0.8,1.1);
scale跟一个值得时候，代表x缩放
transform : scale(0.8);
移动：transform:translate()
1、translateX为正向右移动
transform: translateX(20px);
2、trnaslateY为正 向下移动
transform: translateY(-20px);
3、translate两个值 分别代表x和y
translate如果书写一个值 只代表x
transform: translate(20px,20px);
transform: translate(20px);
4、translate书写百分比是相对于自身的宽和高
transform: translate(100%,100%);
本文标签： 817css3
版权声明：本文标题：8.17css3 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693584541h230682.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论