-
transition事件触发
animation不需要事件触发查看全部 -
向上移动
查看全部 -
由上到下动画效果
查看全部 -
字体下载
查看全部 -
[data-icon]所有含有data-icon的元素 然后用after伪元素加入获取的data-icon的属性值查看全部
-
在外面声明@keyframes 在转换时应用的时我们想要的 所以一开始应该让它向上移动一段聚会 后来才下来 有文字的运用透明度会不那么生硬 animation的animation-fill-mode 属性： none，默认样式。 forwards，动画结束后，保留关键帧最后一帧的样式。 backwards，动画开始前就应用关键帧第一个帧的样式。 both，上面两个都用上。查看全部
-
margin可以为负 当对同一个元素的同一个属性设置不同样式时 选择有限性最高的替换掉 例如这里的translateY(25%)替换掉前面继承父元素的tranlate(50%)查看全部
-
导航条中被选中的.st-control与要显示的内容的大盒子.st-scroll 【这个大盒子装了所有要显示的内容】 是兄弟关系 用~ 对于每一个对应要显示的板块设置.st-scroll的y轴移动 由于每个板块都占100%的高 所以向下移动translateY(-100%) 同时注意兼容性查看全部
-
给不同的设置left查看全部
-
每个板块宽度高度都是100% 即占全屏 overflow:hidden 所以没有滚动条的出现 从而达到效果 改变的是装所有板块的.st-scroll 移动式相当于改变他的坐标 所以设置translate 分别写出他不同时间段的坐标 移动端用translate3d可以开启手机的3d加速 backface-visibility：visible|hidden 不面向屏幕的时候是否可见查看全部
-
html5中添加新的自定义属性 data-xxx a中链接#加上对应的id类 而不是class类 每一个板块都写在section里面 偶数类的背景改变可以再他们的标签那再设一个类 而不是纠结于子元素偶数类选择器查看全部
-
三角形的做法 虽然设置了border为20px 但现实出来是40px 所以后面移动用margin-left;-20px;才是一半 (可以用margin-left 也可以用translate(x) 只要能移动都行 灵活查看全部
-
input 与a宽度一样 都是20% 虽然显示还是圆 但占位仍然是20% 点旁边也是有效果的 input的z-index比a大 优先级高查看全部
-
#st-control + a 表示紧邻元素后面的a #st-control ~ a 表示元素后面所有的a 写在后面的元素优先级更高 可使用z-index改变优先级 之后全部堆在一起了 分别给他们设置left移开0% 20% 40% 60% 80%查看全部
-
主要的4种隐藏元素的方法 display:none 隐藏了不占位了 但visibility是隐藏了但是还占位 此例中单选按钮虽然看不到但还是有作为的 所以前面两张不可选查看全部
举报
0/150
提交
取消