css样式(部分)

最新推荐文章于 2024-09-17 22:59:44 发布

BetweenTimes

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量122

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48572596/article/details/113940102

版权

CSS3-部分样式

边框：

border-radius:圆角边框,可以写绝对值，也可以写百分比（可以让不同的方向进行改变）

box-shadow：阴影，从左往右，分别为水平偏移方向，垂直偏移方向，模糊半径（阴影大小），扩展半径（变大），最后一个是阴影颜色

box-shadow:0 0 0 0 color（可以使用半透明：ragb(0,0,0,0)）

border-image：边框图片

一个class可以引入多个类

背景

background-size:大小

background-origin:规定背景图片的定位区域，从什么地方开始

background-repeat:平铺方式

文本效果

text-shadow:文本阴影，有水平，垂直，模糊三个值，和box-shadow一样，但是少了扩展

字体

字体网站（找字网：zhaozi.cn;）【fontcreator】自己造字体的软件

@font-face:使用自定义字体

font awesome：特殊符号引用地址

2D转换

通过transform来实现。

translate()：位移，下面代码表示水平和垂直方向各位移100像素，第一个变量为X轴，第二个变量为Y轴。变换的过程中，位置不变。

transform:trnslate(100px,100px)

rotate()：旋转角度,顺时针旋转，deg为旋转的符号

transform:rotate(10deg)

scale()：缩放表示缩放2倍

transform:rotate(10deg) scale(2)

skew：推到,表示在x，Y轴推到45度，可以在X和Y 进行推到斜切

transform:skew(45deg)

matrix():矩阵，一般不用

过渡

transition:属性，移动，从哪儿移动到哪儿

transition-delay

linear:匀速;ease:满加速到匀速最后变慢结束；cubl-bezier:贝塞尔曲线，通过两个锚点对线条进行控制，利用贝塞尔曲线可以模拟各种物体的运动模式。

动画

@keyframes 通过关键帧进行规则

animation 通过属性进行调整（具体可查W3C中css动画）

animation:animation-name:动画名称，后面的name可以修改；

书写解释：属性：名字，时间，方式，次数

animatename从哪儿开始，到哪儿结束

书写方法：
animation:animation-name 3s linear 1
@keyframes animatename{
	from{
	
	}
	to{
	
	}
}

第二种方法：
@keyframes animatename{
	0%{
	
	}
	100%{
	
	}
}

关注