CSS特效
CSS强大的特效:
一、边框:
1、 box-shadow:10px 10px 10px 10px red
水平 垂直 模糊 延长 颜色
示例:
<div style="box-shadow:10px 10px 10px 10px red;height: 70px;width: 100px;border: 1px solid red;">
测试数据
</div>
1、 box-shadow:10px 10px 10px 10px red
水平 垂直 模糊 延长 颜色
示例:
<div style="box-shadow:10px 10px 10px 10px red;height: 70px;width: 100px;border: 1px solid red;">
测试数据
</div>
2、border-radius:10px;圆角
3、border-image:url("");
4、border-color:边框颜色
二、背景:
1、background-origin: border-box/padding-box/content-box
定位 :从border开始显示背景/从padding开始显示背景/从content开始显示背景
2、background-clip: border-box/padding-box/content-box
背景绘制区域:从border开始绘制/从padding开始绘制/从content开始绘制
3、background-size:100px 100px(背景大小值 宽 高)
4、多重背景设置:
background-imagge:url(""),url(""),url("");
backgoudnd-size:100px 100px,200px 200px,300px 300px;
background-position:0 0,100px 100px,200px 200px;
5、背景线性渐变:backgound:_webkit_gradient(linear, 0 0, 0 100px);
线性渐变,开始X Y轴,结束X Y轴
三、文本:
1、文本阴影:text-shadow:1px 1px 1px red;
水平方向偏移,垂直方向偏移,模糊程度,阴影颜色
2、文本溢出:text-overflow:clip(与overflow配合使用)/ellipsis(与overflow配合使用超出部分用。。。表示)
示例:
<p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 90px;height: 50px;">
(一行显示,不换行);超出部分剪切掉;超出部分用。。。表示
测试数据测试数据测试数据测试数据测试数据测试数据
</p>
<p>测试数据</p>
<p>测试数据</p>
![]()
3、连续文本换行:word-wrap:break-word(超过宽度后自动换行)
2D/3D转换
一、2D转换:
第1步:设置对象变换时的过渡
transition-property: all;(全部属性参与过渡)
transition-duration: 2s;(过渡时间)
transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
transition-delay: 2s;(延迟时间)
-webkit-transition: all 2s linear 2s;
第2步:设置类型转换
-webkit-transform-origin: 10px 0;(定义转换时发生的参照点,默认为中心点)
-webkit-transform: translate(500px ,500px);
translate()表移动,rotate(deg)表旋转,scale(1,1)表缩放,skew(deg)表斜切,matrix()表组合操作
示例:
.inner{
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
-webkit-transition: all 2s linear 2s;
-moz-transition: all 2s linear 2s;
}
.outer :hover.inner{
-webkit-transform-origin: 10px 0;
-webkit-transform: translate(500px ,500px);
}
二、3D转换:
rotateX()
rotateY()
三、动画设置:
第1步:设置对象变换时的过渡
animation-name: test;(动画的名称)
animation-duration: 2s;(过渡时间)
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
animation-iteration-count:3(动画播放的次数)
animation-direction:alternate(反向运动)
backgoudnd-size:100px 100px,200px 200px,300px 300px;
background-position:0 0,100px 100px,200px 200px;
5、背景线性渐变:backgound:_webkit_gradient(linear, 0 0, 0 100px);
线性渐变,开始X Y轴,结束X Y轴
三、文本:
1、文本阴影:text-shadow:1px 1px 1px red;
水平方向偏移,垂直方向偏移,模糊程度,阴影颜色
2、文本溢出:text-overflow:clip(与overflow配合使用)/ellipsis(与overflow配合使用超出部分用。。。表示)
示例:
<p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 90px;height: 50px;">
(一行显示,不换行);超出部分剪切掉;超出部分用。。。表示
测试数据测试数据测试数据测试数据测试数据测试数据
</p>
<p>测试数据</p>
<p>测试数据</p>
3、连续文本换行:word-wrap:break-word(超过宽度后自动换行)
2D/3D转换
一、2D转换:
第1步:设置对象变换时的过渡
transition-property: all;(全部属性参与过渡)
transition-duration: 2s;(过渡时间)
transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
transition-delay: 2s;(延迟时间)
-webkit-transition: all 2s linear 2s;
第2步:设置类型转换
-webkit-transform-origin: 10px 0;(定义转换时发生的参照点,默认为中心点)
-webkit-transform: translate(500px ,500px);
translate()表移动,rotate(deg)表旋转,scale(1,1)表缩放,skew(deg)表斜切,matrix()表组合操作
示例:
.inner{
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
-webkit-transition: all 2s linear 2s;
-moz-transition: all 2s linear 2s;
}
.outer :hover.inner{
-webkit-transform-origin: 10px 0;
-webkit-transform: translate(500px ,500px);
}
二、3D转换:
rotateX()
rotateY()
三、动画设置:
第1步:设置对象变换时的过渡
animation-name: test;(动画的名称)
animation-duration: 2s;(过渡时间)
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
animation-iteration-count:3(动画播放的次数)
animation-direction:alternate(反向运动)
-webkit-transition: test 2s linear 3 alternate;
第2步:设置类型转换
-webkit-transform-origin: 10px 0;(定义转换时发生的参照点,默认为中心点)
-webkit-transform: translate(500px ,500px);
translate()表移动,rotate()表旋转,scale()表缩放,skew()表斜切,matrix()表组合操作
示例:
.inner{
animation-name: test;(动画的名称)
animation-duration: 2s;
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
animation-iteration-count:3(动画播放的次数)
animation-direction:alternate(反向运动)
animation-inifite:infinite(循环)
-moz-animation: test 2s linear 3;
}
@-keyframes text(动画名){
from{ ... }
to{ -webkit-transform: translate(500px ,500px); }
}
@-keyframes text(动画名){
0%{ transform:rotate(60deg) }
50%{ transform:rotate(0deg)}
100%{ transform:rotate(0deg)}
}