CSS
文章平均质量分 92
前端大可爱
90后程序媛
展开
-
CSS之过渡
transition-property:width;设置过渡的属性为宽度,默认值是all;transition-duration:0.2s;设置过渡持续的时间为0.2s,默认是0transition-timing-function:ease;规定过渡效果的时间曲线。默认是 “ease”。ease(慢快慢),linear(匀速),ease-in(慢快),ease-out(快慢),ease-in...原创 2019-07-07 16:26:19 · 298 阅读 · 0 评论 -
CSS3之动画
在需要移动变化的div上设置一下属性animation-name: ;指定keyfranes动画名称animation-duration:2s; 指定动画执行时间animation-timing-function:ease; 指定动画的速度曲线,默认“ease”缓动,linear平缓…animation-delay:-1s;指定动画的延迟时间,默认的话“0”无延迟,设置为负数可以解决停顿问...原创 2019-07-07 16:44:06 · 267 阅读 · 0 评论 -
CSS3之文本效果
文章目录text-shadowtext-overflowtext-shadowtext-shadow: px px px color; 四个值分别代表X轴 Y轴 模糊程度 颜色.font{ font-size: 50px; text-shadow: 4px 4px 3px red; }.font{ ...原创 2019-07-07 16:59:35 · 465 阅读 · 0 评论 -
CSS之伪类选择器 伪元素
.动态伪类选择器 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 访问过的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 按住鼠标不动的时候 */ *提示:在 CSS 定义...原创 2019-07-06 11:37:09 · 520 阅读 · 0 评论 -
CSS3之边框
文章目录CSS3 圆角边框 border-radius1 2 3 4个值水平 垂直(X轴 Y轴)单个属性边框阴影 box-shadow边框图片 box-imageCSS3 圆角边框 border-radius1 2 3 4个值 border-radius: 20px 60px 100px 140px; /*从左上开始,顺时针赋值*/ border-radius: 20p...原创 2019-07-06 16:03:33 · 152 阅读 · 0 评论 -
CSS之2D转换
旋转 rotate( deg)transform:rotate(45deg); 对元素进行旋转,正值为顺时针,负值为逆时针transform:rotateX(45deg);transform-origin: % %; 定义旋转的原点。例如0 100%是做左下角倾斜 skew( px, px)transform:skew(x,y); 可以改变元素的位置。x y可以为负值平移 transl...原创 2019-07-06 16:29:34 · 141 阅读 · 0 评论 -
CSS之渐变
文章目录线性渐变径向渐变重复性渐变线性渐变background-image:linear-gradient(方位,起始色,末尾色)方位:to top , to bottom , to right , to left , 45deg ,background-image:linear-gradient(方位,起始色 20px/20px,末尾色 70px/80%) 还可以设置结束开始位置径向渐...原创 2019-07-06 16:45:19 · 157 阅读 · 0 评论 -
CSS之透明度
文章目录opacityrgbahttp://caniuse.com/ 大家可以去这个网站查找你所要用的属性在浏览器中的兼容问题opacity opacity: 0.2; /*0~1的数字*/opacity使用的时候很方便,但是使用opacity的时候,其他的内容比如字体颜色也会变浅,所以我推荐使用rgba();rgba四个数字以逗号分隔开,前面三个数字标识...原创 2019-07-06 17:05:48 · 16885 阅读 · 0 评论