css
文章平均质量分 71
kkkkkkkkkrys
不更新的日子都在努力~~
展开
-
transition、transform、animation三个属性的使用与区别详解
transition(过渡)transform(变换)animation(动画)从三个属性就可以知道,tansition是一个过渡属性,就是一个属性从一个值过渡到另一个值,tansform变换,就是一个整体的位置(或整体大小)发生变换,animation动画,就是在一段时间内各种属性进行变化从而达到一个动画的效果。 一、transition(过渡)W3C中对transiti...原创 2018-11-29 15:58:50 · 18456 阅读 · 3 评论 -
使用css来实现幻灯片的效果
使用css来实现幻灯片的效果(1)自动轮播,鼠标移入停止播放,鼠标移出继续播放,但是不能设置按钮自动播放,不能点击一个点跳转到对应的图片思路:切换图片就是像上面js那样的想法,有一个大的容器装着所有的图片,每次想要切换一张图片的时候就用translate来执行左移,但是每次左移之后,我们又不希望立马左移下面一张图片,所以保留一段时间给这张照片停留在那里,所以这个时候下一帧的动画的trans...原创 2018-12-03 15:42:43 · 456 阅读 · 0 评论 -
em,rem的区别与使用
一,rem单位如何转换为像素值1.当使用rem单位的时候,页面转换为像素大小取决于叶根元素的字体大小,即HTML元素的字体大小。根元素字体大小乘rem的值。例如,根元素的字体大小为16px,那么10rem就等同于10*16=160px。<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2018-12-18 11:26:08 · 17462 阅读 · 2 评论 -
分别用css3、js、jQuery三种方法写瀑布流
一、什么是瀑布流瀑布流是一种布局方式,就是一行中的块级元素同宽不同高,下一行的第一个元素插入到上一行中高度最小的元素下面。并且在鼠标滚动的时候继续加载图片。像下面的图中,1234这四个区域都是同一个宽度的元素,并且占据了一行的宽度。那么第五块元素想要插进页面的时候,就选择此时高度最小的第四列。依次类推。 所以,我们可以发现,这里的问题主要有以下几个 首行如何布局 ...原创 2018-12-18 18:11:34 · 167 阅读 · 0 评论 -
前端PC端兼容性问题
1.如果图片加a标签在IE9中会有边框。解决办法:img{ border:none;} 2.rgba不支持IE8-->使用opacityopacity:0.7;/* ff chrome safari opera*/filter"alpha(opacity:70)/*兼容ie*/ 3.ie6,ie7不支持display:inline-bl...原创 2019-01-04 09:59:06 · 1554 阅读 · 0 评论 -
flex布局
一、什么是flex任何元素都可定义为flex布局,但一旦它定义了布局为flex,它就变成了一个容器,那么它所有的子元素也自动回成为这个容器的成员。 例如<div class="flex"></div><span></span>.flex{ display: flex;}span{ display: ...转载 2018-12-25 16:02:41 · 261 阅读 · 0 评论 -
box-shadow
一、什么是box-shadow?怎么使用1.text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color} {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半...转载 2019-01-11 15:24:16 · 860 阅读 · 0 评论 -
CSS中的BFC详解
最近在前端群上面看到有人提出了一个概念:BFC,没听懂是什么意思,于是找了一些资料来看看。Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。首先来讲解一些常用的概念:1.普通流普通流就是元素按照其出现的顺序至上而下进行布局,行内元素水平排列,至到本行已经排满了就再续在下一行进行排列...原创 2019-02-17 15:31:49 · 485 阅读 · 0 评论 -
less 入门
一、特性1、less中的注释可以使用/**/也可使用//2、变量使用@来定义一个变量,比如@test_width:300px3、混合可以将一个元素中多个的的样式写在一起,比如我定义了一个边框的样式为border.border{ border:solid 5px yellow}我可以在不同的私房去使用这个边框的样式比如.box{ wi...原创 2019-09-02 16:31:05 · 506 阅读 · 0 评论