css制作流程卡片,css3分页，卡片制作

1.分页：

ul{

display: inline-block;

margin: 0px;

padding: 0px;

}

li{display: inline;}

a{

float: left;

color:black;

padding: 8px 10px;

text-decoration: none;

transition: background-color .3s;

}

.active{

background-color:burlywood ;

color: white;

}

a:hover{background-color: #ddd;}

• <<
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• >>

效果图：

image.png

其中transition(过渡)属性是个复合属性，它包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称(默认值all)

transition-duration ：规定完成过渡效果需要多少秒或毫秒(默认0s)

transition-timing-function ：指定过渡函数，规定速度效果的速度曲线(默认为ease函数)

transition-delay ：指定开始出现的延迟时间(默认延迟0s)

注意：transition四个子属性之间只能用空格隔开，不能用逗号隔开

2.卡片制作：

.div

{

width:20%;

height:270px;

background-color: white;

box-shadow:0 0px 8px 0 rgba(0,0,0,0.5) ,0 8px 20px 0 rgba(0,0,0,0.5);

margin-bottom: 5px;

border-radius:4px;

}

.container{

text-align: center;

padding: 3px ;

}

a{

display:inline-block;

border:1px solid deepskyblue;

border-radius: 6px;

padding:5px;

transition: 0.3s;

}

a:hover{

box-shadow: 0 0 2px 1px ragb(0 ,150px,150px,1);

}

@keyframes we{

from{background-color: #00BFFF;}

to{background-color: aquamarine;}

}

我们的故事不多，但遇见你就是最好的