搭建wordpress网站,威海 网站建设,英德建设网站,怎么批量修改wordpress文章内容opacity 透明度transition 过渡animation 动画background 渐变 ( 线性渐变 \ 径向渐变 \ 锥形渐变 ) opacity 透明度 设置元素的透明度#xff0c;会影响元素及其所有子元素的透明度#xff0c;值范围#xff1a;0#xff08;完全透明#xff09;到 1#xff08;完全不透… opacity 透明度transition 过渡animation 动画background 渐变 ( 线性渐变 \ 径向渐变 \ 锥形渐变 ) opacity 透明度 设置元素的透明度会影响元素及其所有子元素的透明度值范围0完全透明到 1完全不透明。但不会影响元素的布局即使元素变得透明它仍然会占据其应有的空间visibility: hidden 占据位置只是不可见。若只想影响元素的背景而不影响其内容可使用其它方法如rgba 颜色值进行 background-color 的透明度设置取决于浏览器支持 stylediv{width: 200px;height: 100px;line-height: 100px;font-size: 30px;text-align: center;margin-top: 10px;}div:nth-of-type(1){background-color: #d000ff;/* 设置的是元素的透明度 */opacity: 0.3;}div:nth-of-type(2){/* 设置的是背景颜色的透明度 */background-color: rgba(208,0,255,0.3);}
/style
div文字/div
div文字/div效果:
transition 过渡
属性值说明transition-property设置元素中参与过渡的属性 all \ none \ 指定属性多个用逗号分隔 transition-duration设置元素过渡的持续时间 秒s \ 毫秒ms transition-timing-function设置过渡的时间函数控制过渡效果的速度曲线 ease默认缓慢-加速-缓慢linear匀速ease-in缓慢开始ease-out缓慢结束ease-in-out缓慢开始和结束cubic-bezier(n, n, n, n) 函数取值 [0,1]transition-delay设置过渡效果延迟的时间默认为 0 使过渡效果在触发后一段时间开始
要生效必须要有初始状态和结束状态才能实现过渡效果
style/*书写格式transition-property: width, background, transform;transition-duration: .25s, 1s, 2s;transition-timing-function: linear, ease, ease;transition-delay: 1.9s, 2s, 0s;transition: width .25s linear 1.9s, background 1s 2s, transform 2s;transition: width, background, transform 2s linear 3s;transition: width 2s;*/h1{width: 200px;background-color: rgba(66,85,255,0.6);opacity: 1;transition: all 1s ease-out 1s; /* transition简写同时设置四个过渡属性 */}h1:hover{width: 100%; /* 宽度变化 */background-color: greenyellow; /* 背景色变化 */opacity: 0.5; /* 透明度变化 */}/*display: none和 display: block之间的切换也会出现过渡效果失效的情况原因 display: none是销毁当前dom节点再次切换为display: block时会再创建节点此时css选择器会重新赋予上去。所以不存在渐变动画解决1.用 opacity透明度去替代2.用 visibility: hidden和 visibility: visible进行替换*/h2{/*display: block;*//*visibility: visible;*/opacity: 1;background-color: red;transition: all 2s linear; /* 过渡 */}h2:hover{/*display: none;*//*visibility: hidden;*/opacity: 0;background-color: green;}
/style
h1transition/h1
h2transition/h2效果: animation 动画
属性值说明animation-name关键帧 ( 动画 ) 名称可以同时指定多个动画animation-duration动画完成一个周期所需的时间以秒 ( s ) 或毫秒 ( ms ) 为单位animation-timing-function速度曲线linear从头到尾动画的运行速度相同ease默认值开始低速然后加快结束前变慢ease-in低速开始结束前不断变快ease-out快速开始结束前不断变慢ease-in-out开始和结束时段是慢速中间部分速度最快cubic-bezier(n,n,n,n)贝塞尔曲线可以自己设置速度曲线animation-delay动画开始前等待的时间以秒 ( s ) 或毫秒 ( ms ) 为单位animation-iteration-count动画播放的次数正数 或 infinite ( 无限的 ) 则重复运行动画animation-direction是否应该轮流反向播放从头到尾正向播放或是从尾到头的倒放normal动画正放动画一周期结束后重置到开始位置reverse动画倒放alternate动画在奇数次正向播放偶数次反向播放。如果一个动画是持续播放的程序刚开始动画为第一次这一次播放完毕便进行第二次以此类推alternate-reverse动画在奇数次反向播放偶数次正向播放animation-fill-mode播放之前和之后如何应用样式 none默认值动画不会对元素在动画开始前或结束后样式参数产生任何影响。动画开始前元素显示CSS非动画状态的样式动画结束元素回到动画未运行前的初始状态forwards动画完成后元素保持在动画的最后关键帧。就是动画运行到哪里 结束后它就保持在哪里不会回初始点了backwards动画开始前元素显示动画的第一个关键帧的样式。在动画开始前的等待期它显示的是第一关键帧both结合了前两个的效果。动画开始前的等待期它是第一关键帧的样子动画结束后保持在最后结束帧的模样也不会回到原点了animation-play-state播放状态是否正在运行或已暂停在动画过程中我们可以暂停动画也可以暂停后继续运行值主要有两个running \ paused。当 running 时动画正常播放当 paused 时动画则停在当前帧
常伴随着动画帧 keyframes 一起使用
style.box{width: 100px;height: 100px;background: #0022ff;/* 最简 *//*animation: myMove 3s;*//* 最全 *//*animation: myMove2 5s linear 1s 2 alternate both running;*//* 多组 */animation: myMove2 5s linear infinite,Change 5s linear infinite;}/*简单规则 ( from to )*/keyframes myMove{from{background-color: yellow;}to{background-color: deeppink;margin-left: 300px;margin-top: 200px;}}/*复杂规则 ( 百分比% )*/keyframes myMove2{0%{background:repeating-radial-gradient(circle closest-side,white, #9cef1d 30%);margin-left: 50px;margin-top: 20px;}40%{background:repeating-radial-gradient(circle closest-corner,white,#9cef1d 30%);margin-left: 300px;margin-top: 100px;}70%{background:repeating-radial-gradient(circle closest-side,white,#9cef1d 30%);margin-left: 100px;margin-top: 200px;}100%{background:repeating-radial-gradient(circle closest-corner,white,#9cef1d 30%);margin-left: 50px;margin-top: 20px;}}keyframes Change {0%{transform: rotateZ(0deg);}50%{transform: rotateZ(180deg);}100%{transform: rotateZ(360deg);}}
/style
div classbox/div效果:
background 渐变 ( 线性渐变 \ 径向渐变 \ 锥形渐变 ) 可以使至少两个或多个 指定的颜色之间显示平稳的过渡CSS3定义两种类型的渐变一种是 线性渐变 即 向下 / 向上 / 向左 / 向右 / 对角方向另一种是 径向渐变及由中心定义 线性渐变
/* 语法 */
background:linear-gradient(to direction, color1, color2,...)direction 指明线性渐变的方向默认是从上到下。渐变方向上可以做更多的控制可以定义一个 deg 角度而不用预定义方向 ( to bottom 、to top 、 to right 、to left 、to bottom right ) 等等。color 后可以跟设置颜色显示到什么范围 % 或 px 与颜色用空格隔开
stylediv{width: 150px;height: 150px;display: inline-block;margin: 10px;}.one{background: linear-gradient(#dbff00,#0d6efd);}.two{background: linear-gradient(to right,#dbff00,#0d6efd);}.three{background: linear-gradient(to bottom right,#dbff00,#0d6efd);}.four{background: linear-gradient(80deg,#dbff00 20%,#0d6efd 40%);}.five{background: linear-gradient(-80deg,#dbff00 30%,#0d6efd 80%);}
/style
div classone/div
div classtwo/div
div classthree/div
div classfour/div
div classfive/div效果:
stylediv{width: 700px;height: 150px;background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}
/style
div/div效果: CSS 渐变还支持透明度也可用于创建渐变效果。如需添加透明度我们使用 rgba() 函数来定义色标
stylediv{width: 700px;height: 150px;background-image: linear-gradient(to right,rgb(15, 213,0, 0), rgb(173, 255,47, 1));}
/style
div/div效果: 重复线性渐变
/* 语法 */
background-image: repeating-linear-gradient(方向或角度, color1, color2,...);stylediv{width: 700px;height: 150px;background-image: repeating-linear-gradient(60deg,white, rgb(217, 47, 255,0.2) 10%);}
/style
div/div效果: 径向渐变
/* 语法 */
background-image: radial-gradient(shape size at position, start-color, ..., last-color);必须至少定义两个颜色节点。shape 参数定义形状默认值是ellipse ( 取值可以是 circle : 圆形 ellipse : 椭圆形 ) 。size 设置扩散的最远距离即渐变的大小 ( closest-side半径长度为从圆心到离圆心最近的边。farthest-side半径长度为从圆心到离圆心最远的边。closest-corner半径长度为从圆心到离圆心最近的角。farthest-corner半径长度为从圆心到离圆心最远的角 ) 除了关键字外也可以是具体的长度 px 或 % 。position 用于指定渐变的圆心位置 ( 水平方向位置垂直方向位置 ) 默认情况下渐变的中心是 center ( 表示在中心点 )
stylediv{width: 700px;height: 150px;background-image: radial-gradient(#0022ff, #858585, #6fa915, yellow, black);}
/style
div/div效果:
不同间距的色标和形状
stylediv{width: 700px;height: 150px;background-image: radial-gradient(circle, #0022ff, #858585 10%, #6fa915 50%,yellow,black);}
/style
div/div效果: 不同的扩散半径距离关键字
stylebody::after{content: ;display: block;clear: both;}div{width: 300px;height: 150px;margin: 10px 10px;float: left;}/* 不同扩散半径的对比 */div:nth-of-type(1){background-image: radial-gradient(circle closest-side at 70% 55%, red, yellow, black);}div:nth-of-type(2){background-image: radial-gradient(circle farthest-side at 70% 55%, red, yellow, black);}div:nth-of-type(3){background-image: radial-gradient(circle closest-corner at 70% 55%, red, yellow, black);}div:nth-of-type(4){background-image: radial-gradient(circle farthest-corner at 70% 55%, red, yellow, black);}
/style
div/div
div/div
div/div
div/div效果: 重复径向渐变
/* 语法 */
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);stylediv{width: 700px;height: 150px;background-image: repeating-radial-gradient(at 20% 60%, #ffffff, #e9defa 10%, #fbfcdb 20%);}
/style
div/div效果: 锥形渐变
/* 语法 */
background-image: conic-gradient(from [angle] at [position], color-stop1, color-stop2, ...);函数的结果是一个 gradient 数据类型的对象也是一种特殊的 image。默认以一个点为中心起始点沿着圆周变化可用于创建环形进度条、饼图、彩虹色环等多种图形效果增强了CSS原生布局的灵活性和表现力。from [ 起始角度 ]可选参数用于指定起始角度默认为0度即从正上方开始 顺时针渐变 可以设置一个角度值例如 from 45deg 表示从顺时针45度方向开始渐变。at [ 中心点位置 ]可选参数用于指定渐变的中心位置。可以使用方位关键词或具体的坐标值如 at center 或 at left 50% top 50%。渐变断点 color-stop1, color-stop2, …必需参数用于定义颜色渐变的具体步骤每个颜色后面可以跟一个角度值如 red 90deg 表示在90度位置变为红色或百分比表示在整个圆周上的位置。注意锥形渐变功能在CSS标准的不同版本中有不同程度的支持因此在实际应用时可能需要配合前缀或查询最新的浏览器支持情况
stylediv{width: 200px;height: 200px;border-radius: 50%;/* 默认从上方开始从白色渐变至绿色 */background:conic-gradient(white, green);}
/style
div/div效果: 不同的起始角度和中心点位置
stylediv{width: 200px;height: 200px;border-radius: 50%;/* 在 逆时针45度 的地方顺时针开始渐变中心位于水平方向在100px 垂直方向在70% 处 */background-image: conic-gradient(from -45deg at 100px 70%, #fffb00, #d384ff, #49ffe4);}
/style
div/div效果:
指定颜色断点
stylediv{width: 200px;height: 200px;border-radius: 50%;/* 在指定角度变成指定颜色 */background-image: conic-gradient(#d9ff00 45deg, #ff0000 90deg, #dd00ff 135deg, #2a2dff 270deg);}
/style
div/div效果: 指定颜色显示区域
stylediv{width: 200px;height: 200px;border-radius: 50%;/* 指定颜色区域写法 1 *//*background: conic-gradient(blue 0deg 60deg, red 60deg 120deg, green 120deg);*//* 指定颜色区域写法 2这样每一个颜色都需要计算角度是比较麻烦的事情这时我们可以使用渐变断点的一个特性当后面的渐变断点位置比前面的断点位置小的时候会自动按照前面较大的断点位置渲染也就是说我们可以直接简单的设置为 */background: conic-gradient(blue 30%, red 0deg 60%, green 0deg 100%);}
/style
div/div效果: )
重复锥形渐变
/* 语法 */
style/style
div/div效果:
只有当首尾两颜色位置不在 0% 或 100% 时重复渐变才生效 ( 占满了就没法重复了 ) 。由于位置处于 100% 的色标有时并不会占满渐变区域则浏览器会默认使用最后一个色标的颜色铺满渐变区域 ( 未使用重复渐变且扩散距离未铺满渐变区域的情况下 ) 。渐变函数的结果是 gradient 数据类型的对象 是一种特殊的 image 类型
