1.背景渐变效果.main{background:-webkit-linear-gradient(#a18cd1,#fbc2eb);/*Safari5.1-6.0*/背景：-o-linear-gradient(#a18cd1,#fbc2eb);/*Opera11.1-12.0*/背景：-moz-linear-gradient(#a18cd1,#fbc2eb);/*Firefox3.6-15*/背景：线性渐变（#a18cd1，#fbc2eb）；/*标准语法*/}2.三角形效果.main{width:0px;height:0px;border-right:50pxsolidrgba(0,0,0,0);border-bottom:50pxsolid#fbc2eb;border-left:50pxsolidrgba(0,0,0,0);}3。环形效果.main{width:100px;高度：100px；背景色：#fbc2eb；边界半径：50%；}.main:after{内容：“”；显示：块；宽度：50px；高度：50px；边界半径：50%；背景色：#fff；位置：相对；顶部：25px；左：25px；}4、div上下跳动@keyframes提示{25%{transform:translateY(-3px);}50%{transform:translateY(0);}75%{transform:translateY(3px);}100%{transform:translateY(0);}}.main{width:50px;高度：50px；背景：#fbc2eb；-webkit-animation:提示1s线性无限；动画：提示1s线性无限；}5、加载loading效果.load{width:100px;height:100px;position:relative;margin:0auto;margin-top:100px;}.loadspan{display:inline-block;width:17px;height:17px;border-radius:50%;background:#fbc2eb;position:absolute;-webkit-animation:load1.04seaseinfinite;}@-webkit-keyframesload{0%{opacity:1;}100%{不透明度：0.2；}}.loadspan:nth-child(1){left:0;top:50%;margin-top:-8px;-webkit-animation-delay:0.13s;}.loadspan:nth-child(2){left:15px;top:15px;-webkit-animation-delay:0.26s;}.loadspan:nth-child(3){left:50%;top:0;margin-left:-8px;-webkit-animation-delay:0.39s;}.loadspan:nth-child(4){top:15px;right:15px;-webkit-animation-delay:0.52s;}.loadspan:nth-child(5){right:0;top:50%;margin-top:-8px;-webkit-animation-delay:0.65s;}.loadspan:nth-child(6){right:15px;bottom:15px;-webkit-animation-delay:0.78s;}.loadspan:nth-child(7){bottom:0;left:50%;margin-left:-8px;-webkit-animation-delay:0.91s;}.loadspan:nth-child(8){bottom:15px;left:15px;-webkit-animation-delay:1.04s;}
