西昌做网站,网站空间后台登录,文山网站建设,会员卡管理系统代码文章目录 css3新增属性box-shadowborder-radius设置椭圆 position: sticky;渐变背景线性渐变可重复的渐变背景 径向渐变可重复的渐变背景 过渡分属性 动画关键帧与transition的关系demo 变形平移使用 旋转使用 其他使用立体效果perspective元素位于3D空间还是平面中 缩放变形的… 文章目录 css3新增属性box-shadowborder-radius设置椭圆 position: sticky;渐变背景线性渐变可重复的渐变背景 径向渐变可重复的渐变背景 过渡分属性 动画关键帧与transition的关系demo 变形平移使用 旋转使用 其他使用立体效果perspective元素位于3D空间还是平面中 缩放变形的原点 变量变量的定义、作用域和使用定义作用域使用示例 运算 css3新增属性
box-shadow
box-shadow: 10px 10px 10px rgba(54,54,54,0.36); 元素阴影这个不会影响页面布局分别指定如下参数
水平偏移量正数向右负数向左垂直偏移量正数向下负数向上阴影模糊效果数值越大越模糊颜色
border-radius
border-radius: 2px; 边框圆角半径会影响box-shadow显示
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
设置椭圆
border-radius: 30px/10px;
position: sticky;
粘滞定位和相对定位类型不同的是粘滞定位可以在元素到达某个位置时将其固定住兼容性不好 通过设置top、bottom、left、right设置固定范围当这些值设置为0px时就是整个视口
渐变背景
渐变是图片需要通过background-image进行设置
线性渐变
渐变默认是从上到下
linear-gradient(red, yellow) 从上到下红色到黄色的渐变linear-gradient(to right, red, yellow) to right指定渐变方向这个指定方向还可以设置deg度turn(圈)渐变可以同时指定多个颜色多个颜色默认情况下平均分布即指定的颜色之间的距离是相等的 也可以手动指定分布情况background-image: linear-gradient(red 20px, yellow 80px);指定渐变分界颜色出现的位置
可重复的渐变背景
background-image: repeating-linear-gradient(red 0px, yellow 40px);
径向渐变
radial-gradient(red, yellow) red中心向四周辐射yellow
整体和线性渐变一样默认情况下径向渐变的形状根据元素形状来计算即 元素为正方形径向渐变就是圆形 元素为长方形径向渐变就是椭圆 可以手动指定径向渐变范围的大小radial-gradient(100px 200px, red, yellow) 这个指定大小存在预设值 closest-side 到达最近的边closest-corner 到达最近的角farthest-side 到达最远的边farthest-corner 到达最远的角 可以手动指定元素的径向渐变形状radial-gradient(circle, red, yellow)或者radial-gradient(ellipse, red, yellow) 可以手动执行元素径向渐变的中心点位置radial-gradient(100px 200px at 0px 0px, red, yellow)
可重复的渐变背景
background-image: repeating-radial-gradient(red 0px, yellow 40px);
过渡
过渡只有在属性、样式发生变化的时候才会执行如hover状态 transition: 对象 时间通过过渡指定一个属性切换到目标状态以过渡的方式主要有两个一个是目标状态一个当前状态一个是过渡时间
transition: all 2s 所有属性再2s内进行过渡transition: width 0.5s, height 1s;同时指定多个使用逗号隔开
分属性
简写属性无顺序要求只是路过同时使用duration和delay那么第一个是duration第二个是delay transition-property 指定要执行过渡的属性多个属性使用逗号隔开如果要针对所有属性那就设置为all transition-property: width, height;transition-property: all; transition-duration 执行执行过渡的持续时间针对transition-property不同属性设置的transition-duration也使用逗号隔开然后会对应上去如 transition-property: width, height;
transition-duration: 1s, 2s;transition-timing-function 执行过渡的时间分布效果注意要看到效果一定要先指定transition-during ease 默认效果慢速开始先加速再减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速后减速cubic-bezier() 通过指定函数通过网站https://cubic-bezier.com/#.17,.67,.83,.67可以得到这个曲线steps() 指定过渡效果分几步进行过渡可设置一个、两个值 一个值就是指定分几步两个值就是制定分几步每次在一步的什么时候执行过渡 transition-delay 指定进行过渡的延时
动画
设置动画效果必须先要设置一个关键帧动画效果执行完毕就正常显示元素。 简写属性无顺序要求只是路过同时使用duration和delay那么第一个是duration第二个是delay
animation-name 指定动画的关键帧animation-duration 指定整个动画持续时间animation-delay 指定动画延时时间animation-timing-function 指定动画播放时间函数这个函数指的是关键帧之间的函数 step() 指定的是关键帧之间的跳转次数 animation-iteration-count 动画执行次数默认一次 infinite 无限次 animation-direction 方向 normal from - toreverse to - fromalternate 交替 from - to - from …alternate-reverse 反向交替 to - from - to … animation-play-state 控制动画停止和播放 running 播放paused 停止 animation-fill-mode 动画执行的填充效果 none 默认动画执行完毕元素回到元素属性定义的位置forward 动画执行完毕元素停止到动画结束的位置backward 动画延迟等待时元素会处于动画开始状态结束位置会回到none位置both backward forward
关键帧
keyframes 关键帧设置了动画执行的每一个步骤
与transition的关系
transition – 过渡与transition类型但是transition需要当元素属性发生变化才会发生而动画可以自动触发动态效果
demo
.parent-30 {width: 100px;height: 100px;background-color: silver;/* 设置动画 */animation-name: keyframe-1;animation-duration: 2s;animation-delay: 1s;animation-timing-function: ease-in-out;
}keyframes keyframe-1 {
/* to表示动画的开始位置也可以使用 0% 表示 */
from {width: 100px;height: 100px;
}/* from表示动画的结束位置也可以使用 100% 表示 */
to {width: 200px;height: 200px;
}div classparent-30/div变形
变形是指元素形状或位置发生的改变他不会影响页面布局这个就是和margin的区别margin会影响到布局。 transform 用来设置变形效果变形效果如果想要看到3D效果就要对变形元素的父元素设置persprctive属性
平移
translateX() 元素沿着X方向平移平移使的百分比不是相对父元素而是相对自身translateY() 元素沿着Y方向平移平移使的百分比不是相对父元素而是相对自身 可以利用上面两个实现可适应内容大小的块盒居中translateZ() 元素沿着Z方向平移 Z轴平移正常情况下就是调整元素和人眼之间的距离距离越大元素离人越近 Z轴平移属于立体效果(近大远小)默认情况下网页不支持如果需要看见效果必须要设置视距perspectivetransform: perspective(800px) translateZ(200px);设置视距之后Z轴平移才有效果 平移Z轴他是将整个屏幕向用户方向移动就像场景视图概念此时场景向用户移动视图显示的范围必定会缩小于是显示范围会缩减计算机的视图一直是场景中心因此会出现四周元素消失的情况。
使用
transform: translateX(-50%) translateY(-50%);这个是按照顺序进行变形的。
旋转
旋转的时候立体坐标系的原点在元素的中心位置横穿原点的是x轴纵穿原点的是y轴垂直显示器平面的是Z轴站在轴的正方向顺时针旋转时旋转角度为正数逆时针为负数。 通过旋转可以使元素沿着x、y、z旋转指定的角度
rotateZ 沿着Z旋转旋转的点为元素中心rotateX 验证X旋转旋转的轴为X轴是元素横向的、元素纵向中点的那条线父元素设置perspective有立体效果rotateY 沿着Y旋转旋转的是Y轴横向左边为元素中点父元素设置perspective有立体效果 旋转到背面元素上的数据依旧是可见的只不过是倒过去了。
使用
transform: rotateZ(45deg);
其他
backface-visibility
visible 默认显示hidden 这个不显示是直接背景也都不显示的
使用
transform: rotateY(45deg) translateZ(100px);这个是按照顺序进行变形的先旋转Y轴然后Z轴也会跟着旋转因此平移Z轴时移动的方向并不是正对着人而是会有一个偏移。
立体效果
perspective和transform-style均设置在父元素中
perspective
perspective 指定了观察者与 z0 平面的距离使具有三维位置变换的元素产生透视效果。z0 的三维元素比正常大而 z0 时则比正常小大小程度由该属性的值决定。 三维元素在观察者后面的部分不会绘制出来即 z 轴坐标值大于 perspective 属性值的部分。 当该属性值不为 0 和 none 时会创建新的 层叠上下文。在这种情况下容器内元素的层叠关系像是使用了 position: fixed 一样。
元素位于3D空间还是平面中
transform-style
flat 默认值设置元素的子元素位于该元素的平面中一般的移动(主要是Z轴移动他是没有效果的即使有效果那也是计算机计算出来的仅显示x、y平面上可以看到的设置为preserve-3d那么在显示时会显示Z轴方向上的信息。preserve-3d 指示元素的子元素应位于 3D 空间中。
缩放
缩放的本质是对轴进行拉伸他是一种对像素的增益而不是直接修改了像素也就是说显示像素元素像素*增益
transform: scaleX(2) 水平方向缩放transform: scaleY(3) 垂直方向缩放transform: scale(3) 双方向上的缩放transform: scaleZ(3) 如果transform-style为默认情况即flat那么对于单个元素此时scaleZ()是看不出效果的因为这种元素他只是一个平面的概念他是没有Z轴的要看到Z轴的效果就要将两个元素(也就是两个平面利用position: absolute放置到相同x、y位置然后旋转Y轴才看的出来两者的Z轴间隙。 而单纯的给人看的时候两者的像素一直都是不变的因此单纯在平面是无法观测到的。
变形的原点
transform-origin设定变形原点所有的缩放均围绕变形原点进行变形旋转、缩放均与该属性相关。
center 默认值在中心位置偶数为n/2,奇数为n/2 1transform-origin: 0px 0px
变量
兼容性差 css中有变量的概念但是兼容性存在问题。
变量的定义、作用域和使用
定义
定义就是在一个元素中使用--key: value;进行定义
作用域
css定义的变量的作用域是当前元素以及当前元素的后代元素
使用
var(--key)
示例
style.parent-1 {/* 定义变量 */--color: red;}.parent-1 .box-1 {width: 100px;height: 100px;/* 使用变量 */background-color: var(--color);}.parent-1 .box-2 {width: 100px;height: 100px;/* 使用变量 */color: var(--color);}
/stylediv classparent-1div classbox-1/divdiv classbox-2123/div
/div运算
兼容性差 如width: calc(100px / 2);
