web@css样式进阶

1.图形字体
<i class="fa fa-heart"></i> 操作类名，需
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">导入.css
2.过渡动画
transition: 过渡属性过渡时长运动速度延迟时间;
/*持续时间*/transition-duration: .3s;
/*延迟时间*/transition-delay: 0.1s;
/*过度曲线*/transition-timing-function: linear;
/*过度属性*/transition-property: width,background-color;
/*整体设置*//*transition: all .3s .1s linear;*/
   transition: .3s cubic-bezier(0,1,1,1);
3.形变动画
transform:translate(平移 px) rotate(旋转 deg) scale(比例数字)
4.动画
@keyframes 动画名 {
   0%{样式}
   ...
   100%{样式}
}
/*标签添加动画样式*/
        div{
/*绑定动画名*/animation-name: a1;
/*持续时间*/animation-duration: 1.5s;
/*延迟时间*/animation-delay: 0.5s;
/*动画结束位置backwards forwards*/
   /*animation-fill-mode: forwards;*/
/*运动次数来回算1次 infinite*/
            animation-iteration-count: 1;
/*alternate来回alternate-reverse:终点开始来回 */
            /*animation-direction: alternate;*/
/*动画状态 running paused*/
            animation-play-state: paused;
/*整体设置*/animation: a1 1s 2 linear alternate running ;
}
5.盒子、文字阴影
box-show:x轴偏移(可负) y轴偏移（可负）虚化程度阴影宽度阴影颜色内外阴影inset/outset
text-shadow：x轴偏移(可负) y轴偏移（可负）虚化程度阴影颜色
6.标签的隐藏
/*脱离文档流*/display:none
/*可以用来做动画透明度*/opacity:0
/*隐藏*/visibility：
个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见位置还在
visible
默认值。元素是可见的。
hidden
元素是不可见的。
inherit
规定应该从父元素继承 visibility 属性的值。
7.a标签的4中状态




8.其他常用:
/*超出框做处理*/ overflow:visible（默认）/hidden/scroll/auto/inherit(继承父的overflow)
/*垂直对齐方式*/vertical-align:baseline(默认)/sub/super/top/text-top/middle/bottom/text-bottom 常用使用display:table-cell;vertical-align:middle;
/*字体超出框处理*/word-wrap:break-word;
/*改变按钮和其他控件的外观，使其类似于原生控件*/
-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。
-webkit-appearance：none | button | button-bevel ....

猜你喜欢