你的位置:首页 > 网页设计

[网页设计]Css3 学习


一、css3动画

  transition: 属性 过度时间;

#block {  width: 400px;  height: 400px;  background-color: #69c;  margin: 0 auto;				  -webkit-transition: background-color 1s, width 0.5s;}#block:hover {  width: 800px;  background-color: #ff6f6f;}

  animation: (八大属性)

    1. animation-name :动画名
    2. animation-duration:时间
    3. animation-delay:延时
    4. animation-iteration-count:次数
    5. animation-direction:方向
    6. animation-play-state:控制
    7. animation-fill-mode:状态
    8. animation-timing-function:关键帧变化
.class {  animation: name(动画名称) 1s(时间) inlinear(速度) infinite(循环)}@keyframes {  0% {    初始状态  }  100% {    最终状态  }}

 

二、三角箭头

.class {  width: 0;  border: 8px solid;  border-color: #333 transparent transparent transparent;}

  

三、css3渐变色

  线性渐变:linear-gradient (角度/方向,色值,色值,...)

.class {  background: linear-gradient (direction, color-stop1, color-stop2, ...);}

  径向渐变:radial-gradient (形状,色值,色值,...)

.class {  background: radial-gradient(center, shape size, start-color, ..., last-color);}