1.动画
@keyframes:规定动画
简写属性:animation:player 10s ease 0s normal running
案例:
<!DOCTYPE HTML>
<html>
<head>
<title>动画</title>
<meta charset="utf-8"/>
<style type="text/css">
@keyframes player{
0%{background-image:url(./img/3.jpg);}
25%{background-image:url(./img/4.jpg);}
50%{background-image:url(./img/5.jpg);}
100%{background-image:url(./img/6.jpg);}
}
div.c1{
width:400px;
height:300px;
border:1px solid red;
background-image:url(./img/2.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
animation:player 10s ease 0s 1 normal running;
}
</style>
</head>
<body>
<h1>动画</h1>
<div class="c1"></div>
</body>
</html>6
2.线性渐变:
向下/向上/向右/向左/对角方向
语法:background:linear-grodient(direction:,color-top/~);
径向渐变:由它们的中心定义;
语法:background:radial-gradient(center,shape,size,start-color···);
3.clip:
eg: img{
position:absolute;
clip:rect(100px,60px,200px,70px);
}
white-space:nowrop; 强制在一行显示
text-overflow:ellipse; 超出部分省略号显示,超出内容省略号显示
overf:hidden;超出部分隐藏
案例:
<!DOCTYPE HTML>
<html>
<head>
<title>clip</title>
<meta charset="utf-8"/>
<style type="text/css">
img{
position:absolute;
clip:rect(100px,60px,200px,70px);
}
</style>
</head>
<body>
<h1>clip</h1>
<img src="./img/1.jpg"/>
</body>
</html>
css中的动画,渐变和clip属性方法
最新推荐文章于 2024-09-19 10:06:46 发布