| 分享几个css3里面常用的基本属性渐变，2D，动画 | 您所在的位置：网站首页 › css3字体颜色渐变 › 分享几个css3里面常用的基本属性渐变，2D，动画 |
|
1. 图片原点
背景图默认填充的区域是 padding 及 content 区域，我们把左上角的padding起点叫做图片的原点。 图片填充整个盒子background-size: cover; 图片是否换行background-repeat: no-repeat; 设置背景图的原点为padding区域 : 默认值background-origin: padding-box; 设置背景图的原点为border区域background-origin: border-box; 设置背景图的原点为content区域background-origin: content-box; 2. 图片裁剪background-clip: 设置背景图的向外裁剪的区域；默认是border-box 只要超出border区域，则多余的部分会被裁减掉。 默认值：超出border区域会被裁减掉：background-clip: border-box; 超出padding区域就会被裁减掉：background-clip: padding-box; 超出内容区域就会被裁减掉：background-clip: content-box; 注意： 如果想让背景图只呈现在文本上，则需要做以下几件事情： 设置文本颜色为透明：color: transparent; 给background-clip前面加上私有前缀 -webkit-：-webkit-background-clip: text; 3. 文本属性 white-space: pre；该属性类似于pre标签，加上之后，内容会按照原来的写法来展示 white-space: nowrap;文本不换行，使用频次相对较高 text-overflow: clip;超出部分直接被裁减掉，注意，要想生效，必须添加overflow:hidden； text-overflow: ellipsis;超出部分显示省略号 重点掌握 4. 渐变 4.1 线性渐变 background-image: linear-gradient();渐变的原理其实就是一张背景图片，但是不需要引入图片的指定url的，而是使用内置的特殊的“图片”。 该属性可以实现渐变效果，默认是从上往下的渐变 background-image: linear-gradient(red, yellow, blue); 复制代码 如果要改变线性渐变的方向，则需要使用关键词来处理 to background-image: linear-gradient(to right, red, yellow, blue); background-image: linear-gradient(to right top, red, yellow); 复制代码 如果要改变线性渐变的方向，还能使用角度来处理,从中间画一条线，旋转30°。 background-image: linear-gradient( 30deg,red, yellow, blue); background-image: linear-gradient(red, yellow, blue); 复制代码 调整开始渐变的位置：这行代码意思是指：50px以前是纯红色，50px以后开始渐变，渐变到100px的时候，是纯黄色；然后继续渐变，150px及以后颜色是蓝色 。 background-image: linear-gradient(red 50px, yellow 100px, blue 150px); 复制代码 重复渐变 background-image: repeating-linear-gradient(red 50px, yellow 100px, blue 150px); 复制代码 4.2 径向渐变径向渐变：多个颜色之间的渐变，默认是从圆心开始往四周扩散，通常是指圆形或者椭圆形。 径向渐变：径是值半径的意思 background-image: radial-gradient(red, yellow, green); 复制代码 设置圆心在左上角 background-image: radial-gradient(at left top, red, yellow, green); 复制代码 设置圆心为x轴50px，y轴100px background-image: radial-gradient(at 50px 100px, red, yellow, green); background-image: radial-gradient(red, yellow, green); 复制代码 调整渐变形状为正圆 background-image: radial-gradient(circle, red, yellow, green); 复制代码 调整渐变的位置，意义与线性渐变相同 background-image: radial-gradient(red 20px ,yellow 50px, rgba(0,0,0,.4) 100px); 复制代码 5. 2D 5.1 transform（位移）2d位移可以改变元素的位置： 先给元素加上转换属性 transform 给transform具体的值：translateX: => 设置水平方向位移，需要指定长度，如果是百分比，则参考自身的宽度; transform: translateX(100px); translateY: => 设置垂直方向位移，需要指定长度，如果是百分比，则参考自身的高度; transform: translateY(50px); translate : => 一个值代表水平方向， 两个值代表水平和垂直方向； transform: translate(100px , 50px); 注意： 位移与相对定位很像，都不会脱离文档流,不会影响到其他元素 与相对定位的区别：相对定位的百分比是参照的父元素，位移是参照的自身 浏览器对位移解析的时候，性能会更好，效率会更高 位移对行内元素无效 配合定位，可以实现元素水平垂直居中面试点：如何让一个未知宽度和高度的子盒子实现水平垂直居中？ a：使用定位配合位移 父盒子设置相对定位 子盒子设置绝对定位，且 left50%,top50% 子盒子 transform: translate(-50%,-50%)b：使用 flex布局 父盒子设置flex 父盒子加上 justify-content: center && align-items: center； 5.2 缩放2D缩放是值： 让元素放大或缩小 使用： 给元素加上transform属性 设置transform的值 scaleX : 设置水平方向的缩放比例，值为一个数字。1表示不缩放，维持原样。大于1等于放大，小于1等于缩小 scaleY : 设置垂直方向的缩放比例，值为一个数字。1表示不缩放，维持原样。大于1等于放大，小于1等于缩小 scale : 同时设置水平和垂直方向 div:hover { transform: scale(1.5); } 复制代码 5.3 旋转2d旋转：让元素在二维平面内，顺时针或者逆时针渲染 方法： 给元素添加转换属性 transform 编写具体值 rotate 正数是顺时针，负数是逆时针 transform: rotateZ(1deg); 复制代码 5.4 复合写法这是复合写法，通常如果我们要写2d效果的时候，先写位移，再写缩放，最后再写旋转。否则可能会出现旋转之后中心点位置偏移的问题。 transform: translate(100px) scale(1.3) rotate(60deg); 复制代码 6. 动画动画： 关键帧: 指在构成一段动画的若干帧中，起决定性作用的那几帧。 使用动画： 定义关键帧 (定义动画)； 使用animation来调用动画 动画名字 + 持续时间 是必填的简单定义动画 @keyframes : 声明一个动画语法； pgm : 动画名字 可以随便自定义 @keyframes pgm { from { } to { transform: scale(1.5); } } 复制代码复杂动画定义 @keyframes move2 { 25% { background-color: skyblue; } 50% { background-color: orange; } 75% { background-color: blue; border-radius: 50%; } 100% { background-color: yellowgreen; border-radius: 50%; transform: translate(100px); } } 复制代码几个必须调用动画的参数 必填： 动画名字 animation-name: move; 复制代码 必填： 持续时间 animation-duration: 2s; 复制代码 设置动画的类型 ，可选 animation-timing-function: linear; 复制代码 设置动画延迟时间， 可选 animation-delay: 0s; 复制代码 设置动画的播放次数 可选：值为number的时候，可以指定动画播放次数，也可以指定为infinite,无限次的意思。 animation-iteration-count: infinite; 复制代码 设置动画方向， 可选 normal默认值 reverse反方向 alternate 先正常再反向 alternate-reverse 先翻转再正常。 animation-direction: normal; 复制代码 设置动画结束的状态 forwards: 动画结束时，保持最终定点状态 backwards 回到最开始状态。 animation-fill-mode: backwards; 复制代码 复合写法 animation: move2 3s linear infinite alternate; 复制代码 设置动画播放状态， running代表播放， paused代表暂停 。 div:hover { animation-play-state: paused; } 复制代码 6.1 练习利用动画和2d来实现轮播图模型 核心在于控制main这个盒子的滚动，最外层wrapper还是需要保持固定；所以flex要加在mian中。 而且，滚动到最后一个盒子的时候，会有一个盒子的空白距离，所以，把第一个盒子复制一份放到最后，就刚好可以弥补这个空白距离； 当空白距离滚动结束之后，动画也完成了一次循环，所以第一张图又会从起点开始滚动，刚好能够衔接上。 .wrapper { margin: auto; width: 300px; height: 100px; border: 1px solid red; overflow: hidden; } .main { display: flex; animation: move 6s linear infinite; } .box { flex-shrink: 0; width: 300px; height: 100px; } .inner1 { background-image: linear-gradient(yellow,green,skyblue); } .inner2 { background-image: linear-gradient(pink,purple); } .inner3 { background-image: linear-gradient(red, orange); } @keyframes move { from { } to { transform: translateX(-900px); } } 盒子1 盒子2 盒子3 盒子1 复制代码 7. 过渡transition： 过渡可以在不使用动画的情况下，让元素从一种样式平滑过渡到另一种样式。 特别注意： 哪个元素需要过渡，就加在哪个元素身上，而不是hover；持续时间和需要过渡的元素是必填的。 需要过渡的属性，多个值以逗号分隔。 transition-property: width,background-color; 复制代码 过渡持续时间 transition-duration: 1s; 复制代码 延迟时间 transition-delay: 1s; 复制代码 过渡类型 transition-timing-function: linear; 复制代码 复合写法 transition: all 1s; 复制代码 |
| CopyRight 2018-2019 实验室设备网 版权所有 |