css3
文章平均质量分 62
JunXian9102
人生就是不断的折腾!
展开
-
css3基础笔记01
一,伪元素选择器 常用的伪元素:lorem快速生成测试文本 1,伪元素选择器 用的是两个冒号分隔,早期写法是一个冒号,浏览器也能识别,但是不建议酱紫写。 1,首字母加样式 ::first-letterp::first-letter{ font-size: 30px; color: hotpink; float: left;/* 首字母下沉 */2,首行特殊样式 ::first-原创 2017-05-17 12:09:30 · 228 阅读 · 0 评论 -
css3基础笔记02
一,过渡:让某些属性按照渐渐的进行改变。 transition: 过渡的单独写法:linear,ease-in,ease-out实际开发的时候 不会使用transition来制作太长的动画效果 所有使用默认的ease即可。div{ width: 100px; height: 100px; border: 1px solid gray;/*指定属性,如果想要所有的都能够过渡 使用al原创 2017-05-17 15:08:36 · 268 阅读 · 0 评论 -
css3基础笔记03-2d和3d过渡
一,2d过渡: 安卓机器人demo: <style> body{ background-color: skyblue; } .robot{/* border: 1px solid gray; */ margin: 50px auto; width: 400px; height: 400px;}.robot>div{ background-color: yel原创 2017-05-17 17:34:38 · 294 阅读 · 0 评论 -
css3基础3D小盒子笔记
3d小盒子: 记忆点: ① perspective:500px; 透视效果。 显示3d透视效果,需要配合父元素添加transform-style:preserve-3d; 在旋转时才能在3d空间变换显示。 ②x轴,y轴,z轴的旋转后的移动,始终是根据自身的Z轴移动。 transform:rotateY(0deg) translateZ(100px);<style> body{原创 2017-05-18 10:48:34 · 416 阅读 · 0 评论 -
css3动画基础语法01
一,动画的使用必须要准备 1,准备动画@keyframes关键字定义 2,需要为想要使用动画的dom元素 添加一系列的动画属性。/* 1,定义动画 */@keyframes toright{ from{ /* from中如果不设置默认使用的是 初始状态 */ } to{/* 移动方向 */ transform:translateX(800px); }}/*原创 2017-05-18 11:56:20 · 472 阅读 · 0 评论 -
css3基础02web字体及字体图标
一,web字体: css3提供web字体,支持导入第三方字体文件。 实际开发中不会让用户下载整个字体文件包,而是在字库文件中截取某一段来减少用户容量。 (实际开发中美工会提供) ①阿里巴巴字体制作网站:iconfont-阿里巴巴矢量图标库。 在线制作文字→下载→下载后无文件后缀名→手动修改为.zip格式后解压→sublime里边复制粘贴。→把需要的文件粘贴到根目录下。→修改url中的路径。原创 2017-05-18 14:33:25 · 243 阅读 · 0 评论 -
css3弹性布局基础01
一,新型布局方式:使用细节: 弹性布局,默认一行显示,无法换行。 换行需要自行开启弹性布局的换行功能。 变为多行以后及无法使用align-items 进行位置设置。 只能用align-content 在多行的时候 设置的属性跟justify-content一模一样。flex-wrap:wrap; ①display: flex; ②/* 调整主轴方向 */ flex-direc原创 2017-05-18 15:07:26 · 327 阅读 · 2 评论 -
fullpage插件的基本使用
1,fullpage插件是基于jq的插件,所以必须先导入jq , 2,自定义传参 3,注意布局的子页面的class必须拥有 section。 4,需求:当滚动到新页面的时候,当前页变色 eq()方法。 jq中当前页变色 eq()方法 需要的索引是0开始, 所以当前页应的索引应该是index-1: $(“.section”).eq(index-1).css(“backgro原创 2017-05-18 16:40:37 · 267 阅读 · 0 评论