animation不需要事件触发
transition需要事件触发
字体下载网址
字体下载的网址
@keyfrmes语法的介绍
animation 的取值说明
font-face
css-backface-visibility
CSS3 font-smoothing
导入字体语法规则
移动端用translate3d可以开启手机的3d硬件加速
用border做三角形的思路不错
{
content:"";
width:0;
height:0;
overflow:hidden;
border:20px solid transparent;
border-bottom-color:red;
position:absolute;
bottom:0;
}
定义moveDown
ease-in-out:动画由快到慢再到快
ease-in:由快到慢
backwards:动画在0.2s播放前,让动画处于开始状态
获取的data-icon的属性值,用[data-icon]
字体格式 @font-face { font-family: "Raphaelicons"; src:url('../fonts/raphaelicons-webfont.eot') format('eot'), url('../fonts/raphaelicons-webfont.ttf') format('truetype'), url('../fonts/raphaelicons-webfont.woff') format('woff'), url('../fonts/raphaelicons-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }
制造三角形两种方法{content: ""; height: 0; width: 0; border: 20px solid transparent; border-bottom-color: #821334;} {position: absolute; height: 200px; width: 200px; background-color: #FA96B5; -webkit-transform: rotate(45deg); overflow: hidden; backface-visibility: hidden;}盒子正方形旋转45度,把上半部分溢出隐藏。
+号作为选择器是指紧跟其后的元素,~是寻找后面的兄弟级元素。
CSS3 backface-visibility
css3的@font-face设置字体 h5的data-icon="H" 取出字体库字体
transition事件触发
animation不需要事件触发
向上移动
由上到下动画效果
字体下载