随笔分类 - HTML/CSS
摘要：一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题 二、使用： ①基本： Node.RequestFullScreen（）开启全屏显示 Node.CancelFullScreen（）关闭全屏显示 ②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需
阅读全文
摘要：一、自定义属性（html5标准）data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写，大写会自动转为小写 二、jquery的方式操作自定义属性，jQuery方式操作的是内存 三、HTML5的方式获取自定义属性，HTML5操作的是DOM 四、案例：t
阅读全文
摘要：一、获取DOM的方式 ①通过类名获取元素，以伪数组形式存在 ②通过css选择器获取元素，符合匹配条件的第1个元素 ③通过css选择器获取元素，以伪数组形式存在 二、jQuery操作类的方法(参考文章jQuery相关方法2) ①增加 addClass( ) ②删除 removeClass( ) ③切换
阅读全文
摘要：一、3d转换 3D旋转套路：顺着轴的正方向看，顺时针旋转是负角度，逆时针旋转是正角度 二、代码 三、效果
阅读全文
摘要：一、语义化标签的作用 ①从开发者角度考虑的是提高代码的可读性和可维护性 ②从网站发布者的角度考虑的是SEO搜索引擎优化 二、语义化标签的兼容问题 ①IE9以下的浏览器不支持H5标签(大部分的css3属性,一些h5的API)，会把这些标签当成行内元素 ②语义化标签需要动态创建通过JavaScript的
阅读全文
摘要：一、知识点 ①background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。 ②视觉插件stellar 视差滚动指网页滚动过程中，多层次的元素进行不同程度的
阅读全文
摘要：一、定义： 在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用 border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和b
阅读全文
摘要：一、7阶层叠水平 一般了解z-index，position(值非static)，display ，float:left 可以控制元素的层级。经过例子验证，当元素有内容时，内容的层级会更高。 任何元素都有层叠顺序，当元素发生层叠时，层级高的会显示在上面，覆盖层级低的元素。当元素的层级相同时，则会根据D
阅读全文
摘要：一、案例介绍 采用HTML5和CSS3制作 使用用几幅很大的图片或色块做背景，再添加一些简单的内容，实现全屏切换的效果 适用于制作各种宣传页、活动页 二、知识点 使用动画分为js实现的动画（帧动画，使用定时器，每隔一段时间更改当前元素的状态）和css3显示的动画（补间动画，加过渡只需状态改变产出动画
阅读全文
摘要：前面介绍了css3 2D变形（transform）移动、缩放、旋转、倾斜 有2D 也有3D，例如3D transform中有下面这三个方法： rotateX( angle ) rotateY( angle ) rotateZ( angle ) perspective 属性定义 3D 元素距视图的距离
阅读全文
摘要：backface-visibility 属性定义当元素不面向屏幕时是否可见。 如果在旋转元素不希望看到其背面时，该属性很有用。
阅读全文
摘要：渐进增强（progressive enhancement）：（向上兼容） 1.针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 （从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览
阅读全文
摘要：一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 文字阴影：水平位置，垂直位置，模糊距离，阴影的颜色。
阅读全文
摘要：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 css3 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Fl
阅读全文
摘要：思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下： 当然也有其他的方法制作心形，比如：两个圆 + 正方形，可以看另外一篇园友的文章：心跳 CSS
阅读全文
摘要：animation 属性是一个简写属性，用于设置六个动画属性： 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 3.animation-timing-function 规定动画的速
阅读全文
摘要：一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。 一个作用：使定位的盒子居中对齐，代替原来的方法——嵌套的定位盒子如何居中？ 二、scale(x,y)或
阅读全文
摘要：效果图如下： 代码：
阅读全文
摘要：transition 属性是一个简写属性，用于设置四个过渡属性： 1.transition-property 设置过渡效果的 CSS 属性的名称。一般写all 2.transition-duration 完成过渡效果需要多少秒或毫秒。单位有s和ms（1s=1000ms） 3.transition-t
阅读全文
浙公网安备 33010602011771号