【前言】 通过CSS3,我们能够创建动画,可以在许多场合下替代动画图片、Flash动画和JS 【CSS3的@keyframes规则】 @keyframes规则用于创建动画,在@keyframes中规定某项CSS样式,就能创建由当前样式主键变化成新样式的动画效果。 【兼容性】 IE10、Firefox ...
分类:
Web程序 时间:
2017-11-29 18:11:08
阅读次数:
187
其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要,下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法 ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 ) 第一种 css3的transform 第二种 flex盒子布局 第三种 display的ta ...
分类:
Web程序 时间:
2017-11-26 00:45:46
阅读次数:
232
一、作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色j ...
分类:
Web程序 时间:
2017-11-22 21:57:03
阅读次数:
341
calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 calc()语法: 加 (+ ...
分类:
Web程序 时间:
2017-11-21 14:33:43
阅读次数:
240
calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 calc()语法: 加 (+ ...
分类:
Web程序 时间:
2017-11-20 17:37:52
阅读次数:
330
我发现现在很多网站都使用了这种效果,比如说锤子官网、elementui官网、秒味课堂等,不单单有鼠标跟随的效果,随着鼠标的移动还有视觉差的效果,看起来很高大上的技术,其实实现起来很简单,主要利用css3的transform-style和persperctive属性。 废话不多说直接上代码: html ...
分类:
移动开发 时间:
2017-11-18 21:01:56
阅读次数:
158
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个 ...
分类:
Web程序 时间:
2017-11-18 14:54:04
阅读次数:
282
问题 想用vue绑定父文本生成的HTML内容,但是发现CSS样式根本不生效,选择器没起作用 代码: 设置样式: 这样之后,发现样式不起作用 解决方案: scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组 ...
分类:
Web程序 时间:
2017-11-18 11:20:34
阅读次数:
268
也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手。 本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助。 ...
分类:
Web程序 时间:
2017-11-15 00:27:59
阅读次数:
235
该方法用于获取浏览器支持的transform属性。如果返回的为空字符串,则表示当前浏览器并不支持transform ...
分类:
Web程序 时间:
2017-11-14 14:39:30
阅读次数:
209