文字阴影-凹凸文字、过渡属性
2020-11-30 本文已影响0人
小飞船1号
一、字体样式缩写
font:文字粗细 大小/行高 字体名称;
font: bold 100px/200px "微软雅黑";
二、css3中的文字阴影
text-shadow：x y r color;
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff;
- 01x：表示阴影在水平方向的偏移量，可以设置成负值，正负不表示大小，只表示方向。水平向右为正，向左为负，单位是px
- 02y：表示阴影在垂直方向的偏移量，垂直向上为负，向下为正
- 03r：表示阴影的模糊程度，数值越大阴影越模糊，单位px
- 04color：表示阴影的颜色
- 05 ：css3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开
凹凸文字小例子
利用文字阴影的原理，一面阴影是暗色的，一面的阴影是亮色的，颜色相换，就可以出来文字凹凸效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>凹凸文字</title>
</head>
<style type="text/css">
body{
background: #ccc;
}
div{
color: #ccc;
text-align: center;
font: bold 100px/200px "微软雅黑";
text-shadow: 1px 1px 0px #fff ,-1px -1px 0px #333;#凸形字
#text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff; #凹形字
}
</style>
<body>
<div>
凹凸文字
</div>
</body>
</html>
凸形字
凹形字
三、过渡属性
作用就是在元素的默认样式与最终样式变化之间产生的一个过程，在css3中新增了一个属性叫transition
transition: all 0s linear 0s;
注：
- 01 第一个参数的作用是设置元素身上的那些属性产生过度，一般用all表示所有的属性都过渡
- 02 第二个参数的作用设置过渡需要时长，单位是s，不能省略
- 03 第三个参数的作用设置过渡的动画形式，linear表示匀速
- 04 第四个参数设置当前过渡等待多久之后才会执行(延时)，即使为0，单位也不能省略
- 05 :hover 选择某个元素被鼠标移上时的状态
- 06 transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会再有过渡变化
