CSS3总结

最新推荐文章于 2022-08-16 15:13:55 发布

weixin_38902950

最新推荐文章于 2022-08-16 15:13:55 发布

阅读量159

点赞数

分类专栏： Web前端开发文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_38902950/article/details/85201916

版权

Web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、圆角边框和阴影

1、圆角边框border-radius
分为4个属性：
border-top-left-radius:1px 2px;
border-top-right-radius:2px 4px;
border-bottom-left-radius:4px 8px;
border-bottom-right-radius:4px 8px;

border-radius:水平值 垂直值;
border-radius:1px; 表示长半轴短半轴一样长。

2、阴影box-shadow
inset 水平偏移 垂直偏移 模糊距离 颜色
  inset 可选，内部阴影
  outset 默认值 外部阴影

example:
box-shadow: 10px 10px 5px #888;
box-shadow: inset 10px 10px 5px #888;

2、文字和文本

1、text-shadow属性
text-shadow:水平偏移 垂直偏移 阴影大小 颜色；
<h1>Web design</h1>
h1{
text-shadow:2px 2px 3px blue;
}

2、word-wrap属性
 normal
 break-word

word-wrap:break-word;   允许长单词自动换行

3、@font-face规则
利用@font-face规则，定义web字体，并引用
需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。
.TTF/.OTF
.EOT
.SVG
.WOFF

步骤： 1）下载字体，假设只有一种TTF格式
      2）可利用 www.fontsquirrel.com/tools/webfont-
生成其他格式的字体。
      3）建立fonts文件夹存放字体文件
      4）之后引用字体文件

example：

<!DOCTYPE html>
<html>
<head>
	<style> 
		@font-face{
		font-family: kastlerFont;
		src:url('fonts/kastler.ttf'),
		    url('fonts/kastler.eot'),
		    url('fonts/kastler.woff'),
		    url('fonts/kastler.svg');
		}
		p{
		font-family:kastlerFont;
		}
	</style>
</head>
<body>
<p>Web front-end development</p>


</body>
</html>

3、2D转换

1、旋转
transform:rotate(30deg);
单位deg，正数表示顺时针，负数表示逆时针

2、缩放
transform：scale(x,y);
x:水平方向缩放倍数
y：垂直方向缩放倍数
0~1：缩小 >1:放大

.box:hover{
  transform:scale(1.2);
}
x，y同时放大1.2

在sublime中使用 trf 扩展

4、过渡与动画

1、过渡 transition属性
transition-property:要过渡的属性名
transition-duration: 持续时间
transition-timing-function:过渡函数
transition-delay:延时

transition: 属性名 持续时间 过渡方法
trs扩展

transition-timing-function属性取值
linear      匀速
ease        慢快慢
ease-in     慢快
ease-out    快慢
ease-in-out 慢快慢

div{
color:#000;
background-color:#123;
transition: all 1s linear;
}
div:hover{
color:#999
backgroud-color:white;
}

2、animation动画
  1）定义动画：keyframes规则
  2）调用动画：animation属性

@keyframes mycolor
{
    0% {background-color:red;}
    30% {background-color:blue;}
    60% {background-color:yellow;}
    100% {background-color:green;}
}
div:hover{
    animation:mycolor 5s linear;
}

animation属性取值：
animation-name :   引用keyframes动画的名称
animation-duration: 动画完成时间
animation-timing-function:默认ease
animation-play-state: running/paused

5、3d变换

1、3d变换
首先声明
transform-style:preserve-3d;

2、旋转
x轴：向右
y轴：向上
z轴：向外
transform:rotateX(30deg);

3、透视
perspective 属性，眼睛离舞台的距离
perspective：100px;
离的越远，近大远小的效果越不明显，因为越远光线越接近平行

example：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D</title>
	<style> 
	#stage{
		width: 300px;
		margin: 100px auto;
		perspective:200px;
	}
	.box{
		width: 100px;
        height:100px;
        float:left; 
        transition:linear 1s;
        transform-style: preserve-3d;
	}
	img
	{
		width:100px;
		height:75px;
	}
	.x:hover
	{		
		transform:rotateX(60deg);
	}
	.y:hover
	{		
		transform:rotateY(60deg);
	}
	.z:hover
	{		
		transform:rotateZ(60deg);
	}
	</style>

</head>
<body>
<div id="stage">
	<div class="box x">
		<img src="frog.jpg" />
	</div>
	<div class="box y">
		<img src="frog.jpg" />
	</div>
	<div class="box z">
		<img src="frog.jpg" />
	</div>
</div>
</body>
</html>