transition过渡+text-shadow文字阴影+新增颜色+实例

来源：互联网发布：ubuntu vmdk安装编辑：程序博客网时间：2024/06/05 09:49

Transition:过渡

Transition：none | property duration [delay] [timing-function ]

transition-property： 属性的名称： （当指定CSS 属性改变时，过渡效果将开始）

-all 所有属性都将获得过渡效果( 默认)

-attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。

-none 没有属性会获得过渡效果。

transition-duration 过渡时间：完成过渡效果需要的时间（以秒或毫秒计）

transition-delay 延迟时间：等~（以秒或毫秒计）之后再变化

transition-timing-function 运动形式 ：(速度曲线)

linear： 匀速

ease：（默认值） 慢快慢

ease-in： 慢入

ease-out： 慢出

ease-in-out： 慢入慢出

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

X1 起点在X轴的坐标,为0~1

Y1 起点在Y轴的坐标,不限

X2 终点在X轴的坐标,为0~1

Y2 终点在Y轴的坐标,不限

起点:对应的 y=x 为匀速， y>x 为加速 y<x 为减速

终点:对应的 y=x 为匀速， y>x 为减速 y<x 为加速

参考：http://matthewlein.com/ceaser/

多属性不同步变化 transition:width 2s,height 1s 2s;

animation:动画

animation必须与@keyframes一起使用
animation: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];
animation-name: 动画名称
none：不引用任何动画名称
animation-duration: 动画执行时间 (单位：s ms)
animation-delay: 动画效果延迟时间(单位：s ms)
animation-timing-function: 动画速度曲线,同 transition-timing-function
linear
ease （默认）
ease-in
ease-out
ease-in-out
cubic-bezier()
animation-iteration-count: 动画执行循环次数
infinite 无限次 | <number>（默认 1）
animation-direction: 动画是否反向运动
normal： （默认） 正常方向
reverse： 反方向运行
alternate： 动画先正后反方向运行
alternate-reverse： 先反后正方向运行
animation-play-state: 动画执行状态
running：运动（默认）
paused：暂停
animation-fill-mode: 动画对象动画时间之外的状态
none （默认） 原始状态>动画>原始状态
forwards 原始状态>动画>停在动画帧100%
backwards (忽略原始状态)进入动画帧0%>动画>原始状态
both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%
keyframes:规定动画帧
@keyframes: animationname {
keyframes-selector { css-styles }
keyframes-selector { css-styles } 
}
animationname animation的名称。
keyframes-selector 动画时间的百分比。
合法值：0-100% | from to
您可以用一个动画keyframes-selectors。
css-styles 一个或多个合法的CSS样式属性
例如：
@keyframes run {
0%{width:0px,background:red;}
100%{width:500px,background:greend;}
}
当帧动画一样的时候： 例如：
@keyframes run {
0%{width:0px,background:red;}
20%{width:0px,background:red;}
80%{width:500px,background:greend;}
100%{width:500px,background:greend;}
}
可以写成
@keyframes run {
0%，20%{width:0px,background:red;}
80%，100%{width:500px,background:greend;}
}
新增颜色
rgba(R,G,B,A) 透明颜色值
HSL：
H:Hue(色调)。
0(或360)表示红色， 120表示绿色，240表示蓝色，取值为：0 - 360
S：Saturation(饱和度)
取值为：0% - 100% 值越大颜色越纯
L Lightness（亮度）
取值为（0%-100%） 变暗 < 50%最纯 >变亮
例如：background:hsl(360,100%,50%);
HSLA：
A：
Alpha透明度。 取值0~1之间。
currentcolor 当前色 currentcolor等于当前的color值
text-shadow文字阴影
参数
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的半径。
color 可选。阴影的颜色

阴影叠加（可重复叠加）
text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的，再渲染前面的
text-shadow实例
层叠：
color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：
color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
自定义字体
@font-face {
font-family: ‘iconfont'; /*自定义字体名称*/

src: url('iconfont.eot'); /*字体路径*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#untitledregular') format('svg');

}
生成兼容代码http://www.fontsquirrel.com/fontface/generator

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="作者">  <meta name="Keywords" content="关键字">  <meta name="Description" content="描述">  <title>文字渐变</title>  <style type="text/css">*{margin:0;padding:0;}body{font:16px 'Microsoft yahei';}.box{    width:500px;padding:20px;margin:50px auto;border:1px solid red;}.box p{   text-align:center;   font-size:50px;   font-weight:bold;   transition-duration:5s;   color:#ddd;   transition-delay:3s;   animation: wq 5s ease 3s infinite  normal running  both;   }@keyframes wq{   0%{ text-shadow:0 0 0px #ff0033;}   20%{text-shadow:0 0 10px #ff9900;}   40%{text-shadow:0 0 10px #ffff00;}   60%{text-shadow:0 0 20px #33ff00;}   80%{text-shadow:0 0 10px #3366cc;}   100%{text-shadow:0 0 10px #9900cc;}   }</style> </head> <body>      <div  class="box">  <p>我是帅哥</p>    </div>    </body></html>

阅读全文

0 0