使用text-align创建视觉平衡
text-align:justify ;可以让除了最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘
text-align:center ;可以让文居中对齐 text-align:right;让文本右对齐
text-align:left;是默认值,让文本左对齐使用width 来调整元素的宽度
width : 220px;
使用heigh来调整元素的高度
height:20px
使用strong标签来加粗文字
<strong>Stanford University</strong>
使用u标签添加下划线
<u>Ph.D.students</u>
在段落标签里面嵌套 em 标签表示斜体字
<em>我是斜体字</em>
使用 s 标签给文本添加删除线
<s>Google</s>
使用 hr 标签创建水平线
<hr>
字体大小
font-size :20px;
给元素添加阴影
offset-x 阴影的水平偏移量;
offset-y 阴影的垂直偏移量;
blur-radius 模糊半径;
spread-radius 阴影扩展半径;
color
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
CSS 里的 opacity 属性用来设置元素的透明度
属性值为 1 代表完全不透明
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。使用 text-transform 属性给显示格式
值&alt&alt&alt& 结果
lowercase “transform me” <<<小写
uppercase “TRANSFORM ME” <<<大写
capitalize “Transform Me”<<<首字母大写
initial 使用默认值
使用父元素的 text-transform 值。
none Default:不改变文字。
是指字体大小 font-size 设置段落的 line-height更改元素的相对位置 position: relative; top:20px; position:absolute;绝对定位
postition:fixed;固定定位的参照物是浏览器的窗口使用 z-index 属性更改重叠元素的位置 z-index 的取值是整数,数值大的元素会叠放到数值小的元素上面。
渐变色
background:linear-gradient(35deg,#ccffff,#ffcccc);
重复渐变色
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
Transform scale 属性可以更改元素的大小
transform:scale(1.5)改变原始大小的1.5 倍
属性沿X轴倾斜元素
transform: skewX(-32deg);
属性沿Y轴倾斜元素
transform:skewY(-10deg);
月牙图形
<style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transtion;
border-radius: 50px;
box-shadow:25px 10px 0px blue
}
<div class = "center" ></div>
基础动画变色
#anim {
animation-name: colorful;
animation-duration: 3s;
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
animation-fill-mode 指定了在动画结束时元素的样式
animation-fill-mode: forwards;动画结束时候就在结束的地方不动了
animation-iteration-count: infinite;动画可以设定为永久( infinite)
球的无限
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: 3;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
transform:scale()大小的比例
transform:rorate()旋转角度,需要添加(deg)做为单位
animation-timing-function 用来定义动画的速度曲线。
ease-out:动画以高速开始
ease-in,动画以低速开始, 以高速结束
linear:动画从头到尾的速度是相同的。
我们可以用 cubic-bezier
来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内, 其中 X 轴代表动画的时间间隔(类似于时间比例尺),Y
轴代表动画的改变。cubic-bezier 函数包含了 1 * 1 网格里的4个点:p0、p1、p2、p3。 其中 p0 和 p3
是固定值,代表曲线的起始点和结束点,坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y
值,设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。