一.css三角的做法
原理将盒子设置为宽高为0,border值设置,每个边就有三角的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container{
position: relative;
width: 100px;
height: 160px;
margin-top: 100px;
background-color: gray;
}
.angle{
/* 三角形 */
position: absolute;
top: -20px;
right: 40px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<div class="angle"></div>
</div>
</div>
</body>
</html>
效果图:
二.溢出文字省略号显示
(1)单行文字溢出省略号显示
步骤:
1.先强制一行内显示文本
white-space:nowrap (默认是normal自动换行)
2.超出的部分隐藏
overflow:hidden;
3.超出的部分用省略号显示
text-overflow:ellipsis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 80px;
/* 第一步强制一行显示 */
white-space: nowrap;
/* 第二步隐藏超出的文字 */
overflow: hidden;
/* 第三部显示省略号 */
text-overflow: ellipsis;
background-color: cyan;
}
</style>
</head>
<body>
<div class="box">
你好,这是测试单行的省略号效果
</div>
</body>
</html>
效果:
(2)多行省略号显示
多行文本溢出显示省略号,有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
/* 调整盒子的高度,使其只显示到第二行,其他的被隐藏掉 */
height: 45px;
background-color: cyan;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒子对象子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
你好,这是测试单行的省略号效果,你好,这是测试单行的省略号效果
</div>
</body>
</html>
效果:
三.css3实现过渡效果(transition)
经常和:hover一起搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始
1.属性想要变化的css属性,宽度高度 背景颜色、内外边距都可以,如果想要多有的属性都变化过渡,写一个all就可以
2.花费时间单位是秒(必须写单位)比如1s
3.运动曲线:墨人生四ease
4.何时开始:单位是秒(必须写单位)可以设置延迟触发的时间默认是0s
注意:谁过渡给谁加transition
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.box{
position: relative;
height: 40px;
width: 40px;
margin-left: 100px;
margin-top: 100px;
background-color: gray;
overflow: hidden;
}
.child1{
height: 40px;
width: 40px;
background-color: red;
transition: all 1s ease;
}
.child2{
height: 40px;
width: 40px;
background-color: green;
}
.box:hover > div:first-child{
margin-top: -40px;
}
</style>
</head>
<body>
<div class="box">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
</body>
</html>
四.css 2D转换
转换(transform)可以实现元素的位移、旋转和缩放效果
移动:translate
旋转:rotate
缩放:scale
(1)移动:tanslate
语法
transform:tanslate(x,y) ; 或者分开写
tansform:tanslateX(n);
transform:tanslateY(n);
注意:
t a n s l a t e 最 大 优 点 : 不 会 影 响 其 他 元 素 的 位 置 \color{red} {tanslate最大优点:不会影响其他元素的位置} tanslate最大优点:不会影响其他元素的位置 ,不像其他的移动方式会影响其他元素位置
t r a n s l a t e 中 的 百 分 比 单 位 是 相 对 于 自 身 元 素 的 t a n s l a t e ( 50 % , 50 % ) \color{red}{translate中的百分比单位是相对于自身元素的tanslate(50\%,50\%)} translate中的百分比单位是相对于自身元素的tanslate(50%,50%)
对 行 内 标 签 没 有 效 果 \color{blue}{对行内标签没有效果} 对行内标签没有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform的移动/旋转/缩放不影响其他的盒子</title>
</head>
<style type="text/css">
div[class^='box']{
width: 200px;
height: 200px;
margin: 100px auto;
}
.box1{
background-color: #00FFFF;
transform: translateY(200px); /*这里移动到box2上面去,并不会影响box2的位置*/
}
.box2{
background-color: #FFFF00;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平居中垂直居中</title>
</head>
<style type="text/css">
.box1{
position: relative;
width: 500px;
height: 500px;
background-color: #00FFFF;
}
.box2{
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #FFFF00;
}
</style>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
(2)旋转 rotate
语法:
tansform:rotate(度数)
注意:
1. r o a t a t e 里 面 跟 度 数 , 单 位 是 d e g , 比 如 r o t a t e ( 45 d e g ) \color{red}{ 1.roatate里面跟度数,单位是deg,比如rotate(45deg)} 1.roatate里面跟度数,单位是deg,比如rotate(45deg)
2. 角 度 为 正 时 , 顺 时 针 , 负 时 为 逆 时 针 \color{red}{2.角度为正时,顺时针,负时为逆时针} 2.角度为正时,顺时针,负时为逆时针
默 认 旋 转 的 中 心 是 元 素 的 中 心 点 \color{red}{默认旋转的中心是元素的中心点} 默认旋转的中心是元素的中心点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rotate实现小三角旋转</title>
</head>
<style type="text/css">
.box1{
position: relative;
width: 200px;
height: 30px;
line-height: 30px;
background-color: antiquewhite;
cursor: pointer;
}
/* ::after创建一个新的元素 */
.box1::after{
position: absolute;
top: 6px;
left: 78px;
content: "";
height: 10px;
width: 10px;
transform: rotate(45deg);
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transition: all 0.4s;
}
.box1:hover::after{
transform: rotate(225deg);
}
</style>
<body>
<div class="box1">
北京
</div>
</body>
</html>
2d转化中心点(transform-origin)
语法:
tansform-origin:x y
注意:
1. 注 意 后 面 的 参 数 x 和 y 用 空 格 隔 开 \color{red}{1.注意后面的参数x和y用空格隔开} 1.注意后面的参数x和y用空格隔开
2. 默 认 转 换 中 心 点 是 元 素 的 中 心 点 ( 50 % , 50 % ) \color{red}{2.默认转换中心点是元素的中心点(50\%,50\%)} 2.默认转换中心点是元素的中心点(50%,50%)
3. 还 可 以 给 x , y 设 置 像 素 或 者 方 位 名 词 ( t o p b o t t o m l e f t r i g h t c e n t e r ) \color{red}{3.还可以给x,y设置像素或者方位名词(top \ bottom \ left \ right \ center)} 3.还可以给x,y设置像素或者方位名词(top bottom left right center)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rotate实现小三角旋转</title>
</head>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: antiquewhite;
cursor: pointer;
overflow: hidden;
}
.box1::before{
display: block;
content: "123";
height: 100%;
width: 100%;
background-color: #FFFF00;
transform-origin: left bottom; /*以左下角为旋转原点*/
transform: rotate(90deg);
transition: all 0.5s;
}
.box1:hover::before{
transform-origin: left bottom; /*以左下角为旋转原点*/
transform: rotate(0deg);
}
</style>
<body>
<div class="box1">
</div>
</body>
</html>
(3)缩放scale
1.语法
transform:scale(x,y)
2.注意
其中x与y用逗号分隔
1.
t
r
a
n
s
f
o
r
m
:
s
c
a
l
e
(
1
,
1
)
表
示
宽
和
高
都
放
大
一
倍
,
也
就
是
没
放
大
\color{red}{1. transform:scale(1,1)表示宽和高都放大一倍,也就是没放大}
1.transform:scale(1,1)表示宽和高都放大一倍,也就是没放大
2.
t
r
a
n
s
f
o
r
m
:
s
c
a
l
e
(
2
,
2
)
表
示
1
宽
和
高
都
放
大
了
2
倍
\color{red}{2. transform:scale(2,2)表示1宽和高都放大了2倍}
2.transform:scale(2,2)表示1宽和高都放大了2倍
3.
t
r
a
n
s
f
o
r
m
:
s
c
a
l
e
(
2
)
只
写
一
个
参
数
,
第
二
个
和
第
一
个
一
样
\color{red}{3.transform:scale(2)只写一个参数,第二个和第一个一样}
3.transform:scale(2)只写一个参数,第二个和第一个一样
4.
t
r
a
n
s
f
o
r
m
:
s
c
a
l
e
(
0.5
,
0.5
)
缩
小
\color{red}{4.transform:scale(0.5,0.5)缩小}
4.transform:scale(0.5,0.5)缩小
5.
s
c
a
l
e
缩
放
的
最
大
优
势
,
可
以
设
置
转
换
中
心
点
缩
放
,
而
且
不
会
影
响
其
他
的
盒
子
\color{red}{5.scale缩放的最大优势,可以设置转换中心点缩放,而且不会影响其他的盒子}
5.scale缩放的最大优势,可以设置转换中心点缩放,而且不会影响其他的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
position: absolute;
top: 50%;
left: 50%;
}
li{
float: left;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
list-style: none;
border: 1px solid black;
margin-left: 10px;
border-radius: 50%;
transition: all 1s;
cursor: pointer;
}
li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
(4)2D转换的综合写法
注意:
1.同时使用多个转换,其格式为transform:translate() rotate() scale()等
2.其顺序会影响转换的效果(先旋转会改变坐标轴方向)
3.
当
同
时
又
位
移
和
其
他
属
性
的
时
候
,
记
得
要
将
位
移
放
在
最
前
面
\color{red}{3.当同时又位移和其他属性的时候,记得要将位移放在最前面}
3.当同时又位移和其他属性的时候,记得要将位移放在最前面
五.动画
制作动画分为两步:
1.先定义动画。2.再使用动画
使用@keyframe定义动画
@keyframes 动画名称{
0%{
}
100%{
}
}
动画序列
- 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
- 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间,或者是from和to,相当于0%和100%
(2)元素使用动画
div{
width:200px;
height:200px;
background-color:red;
margin:100px auto;
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
动画常见的属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画名称 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒默认是0(必须的) |
animation-timing-function | 规定动画的速度曲线,默认是‘ease’ |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是normal,alternate是逆播放 |
animation-play-state | 规定动画是否运行或暂停,默认是running还有push |
animation-fill-mode | 规定动画结束后状态,保持forwarfs回到起始backwards |
动画简写:
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态
注意:1.暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
2.想要动画直接走回来,而不是直接跳到起始位置animation-direction:alternate
3.盒子动画结束后,停在结束位置animation-fill-mode:forwards
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rotate实现小三角旋转</title>
</head>
<style type="text/css">
body{
height: 100vh;
background-color: #FAEBD7;
}
.box1{
position: relative;
width: 5px;
height: 5px;
background-color: blue;
margin: 200px auto;
border-radius: 50%;
}
div[class^="pulse"]{
width: 15px;
height: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 12px blue;
border-radius: 50%;
}
.pulse1{
animation: move 1s linear infinite;
transition: all 1s;
}
.pulse2{
animation: move 1s linear 0.5s infinite;
transition: all 1s;
}
.pulse3{
animation: move 1s linear 0.5s infinite;
transition: all 1s;
}
@keyframes move{
0%{
/* 为什么不用scale进行放大,因为scale会把box-shadow也放大 */
/* transform:translate(-50%,-50%) scale(1); */
}
50%{
/* transform: translate(-50%,-50%) scale(2); */
width: 30px;
height: 30px;
opacity: 1;
}
100%{
/* transform: translate(-50%,-50%) scale(3); */
width: 60px;
height: 60px;
opacity: 0;
}
}
</style>
<body>
<div class="box1">
<!-- 扩散的圆圈 -->
<div class="pulse1">
</div>
<div class="pulse2">
</div>
<div class="pulse3">
</div>
</div>
</body>
</html>
(3)速度曲线
animation-timing-function:规定动画的速度曲线,默认是ease
值 | 描述 |
---|---|
linear | 动画是匀速的 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
lease-in-out | 动画以低速开始和结束 |
step() | 指定了时间函数中的间隔数量(步长) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>step()打字机效果</title>
</head>
<style type="text/css">
body{
height: 100vh;
background-color: #FAEBD7;
}
.box1{
height: 20px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
/* 分8步,一步打一个字 */
animation: move 4s steps(7);
}
@keyframes move{
0%{
width: 0;
}
100%{
width: 84px;
}
}
</style>
<body>
<div class="box1">
<!-- 扩散的圆圈 -->
你好这里是北极
</div>
</body>
</html>
6.3D转换
(1)三维坐标系
(2)3D移动translate3D
transform:translateX(100px) 仅在x轴移动
transform:translateY(100px) 仅在y轴移动
transform:translateZ(100px) 仅在z轴移动
transform:transla3d(x,y,z)分别指定要移动轴的方向距离
(3)透视perspective
表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置。透视可以将一个2d平面,在转换过程中,呈现3d效果
比
较
通
用
的
距
离
是
设
置
为
800
p
x
\color{blue}{比较通用的距离是设置为800px}
比较通用的距离是设置为800px
∗
∗
透
视
写
在
被
观
察
元
素
的
父
盒
子
上
面
∗
∗
\color{red}{ ** 透视写在被观察元素的父盒子上面 **}
∗∗透视写在被观察元素的父盒子上面∗∗
语法:
.class{
perspective:800px;
}
(4)3D旋转rotate3d
让元素在三维平面内沿着x轴、y轴或z轴旋转
语法
transform:rotateX(45deg) 沿着x轴正方向旋转45度
transform:rotateY(45deg) 沿着y轴正方向旋转45度
transform:rotateZ(45deg)沿着Z
注意:需要使用透视
如何判断旋转的正负向:左手定则
左手的手拇指指向 x 轴的正方向
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
- transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度
- x,y,z表示旋转轴的矢量,是标识是否沿该轴旋转,最后一个是旋转角度
- transform:rotate3d(1,1,0,180deg)沿xy对角线旋转180度
- transform:rotate3d(1,0,0,180deg)沿x轴旋转180度
7浏览器私有前缀
浏览器私有前缀为了兼容老版本的写法,比较新的浏览器无需添加
1.私有前缀
-moz-:代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性
2.提倡的写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:!0px;