随笔分类 - 前端
摘要：使用 CSS3 transform 属性，你可以给任何元素加上“变形 transform 属性设置属性值 skew 为进行元素扭曲，其值为deg(度数),可以单独设置x轴skewX,可以单独设置y轴skewY <!DOCTYPE html> <html> <head> <meta charset="
阅读全文
摘要：transform-origin 用于设置动画的基点(中心点)，适用于所有块级元素及某些内联元素。 该样式须配合 transform 使用，默认情况下，元素的动作参考点为元素盒子的中心，其可以使用英文或相对位置设定中心点。 <!DOCTYPE html> <html> <head> <meta ch
阅读全文
摘要：使用 CSS3 transform 属性，你可以给任何元素加上“变形” transform 属性设置属性值 scale 为进行2d缩放，也可以单独定义scaleX与scaleY，其属性值为缩放倍数。 <!DOCTYPE html> <html> <head> <meta charset="utf-8
阅读全文
摘要：使用 CSS3 transform 属性，你可以给任何元素加上“变形 transform 属性设置属性值 translate 为进行元素平面移动，也可以单独定义translateX与translateY，其并不会改变元素的原始位置，只是视觉上面的进行平移。 <!DOCTYPE html> <html
阅读全文
摘要：使用 CSS3 transform 属性，你可以给任何元素加上“变形。 transform 属性设置属性值 rotate transform: rotate(30deg) 为进行元素2d旋转，其值为deg(度数)rotate(30deg)，或是几圈turn(几圈)rotate(1turn)，可以配合
阅读全文
摘要：使用 CSS3 transition 属性，你可以给任何元素加上“过渡”，加上过渡”的元素，在相应样式变化时，会产生动画效果。 transition属性设置元素当过渡效果，四个简写属性分别为为:transition-property(指定CSS属性的name)、transition-duration
阅读全文
摘要：使用 CSS3 box-shadow 属性，你可以给任何元素制作"阴影"。 box-shadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是0。 <stylet> .sky{
阅读全文
摘要：border-radius样式可以给任何元素设定圆角样式。 border-radius：10px当只有一个值的时候，值是给元素四个角都设置定圆角的值。 border-radius：10px 20px 当有两个值的时候，第一个值是设置左上,右下的值。第二个值是设置右上，左下的值。 border-rad
阅读全文
摘要：js操作的DOM 可以分为三个类型 1.属性操作 2.css类 3.样式 首先列举一下js获取DOM的方法 访问单个元素的方法 document.querySelector() document.getElementById() 访问所有元素的方法 document.querySelectorAll
阅读全文
摘要：opacity样式控制元素的透明度 透明数值0 到不透明数值1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { /* 清楚元素默认样式 */ margin: 0px; padding
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } .outerNode { width: 100%; height: 100%
阅读全文
摘要：伪类hover特效作用在本体元素身上时候使用方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .file-btn { float: left; width: 100px; height:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .file-btn { float: left; width: 100px; height: 50px; border: 2px solid
阅读全文
