展开菜单

纯CSS实现动态加载矩形边线的动画效果

纯CSS实现动态加载矩形边线的动画效果

制作web动画效果,通常会想到使用svg或者canvas甚至flash,其实一些简单的动画效果,使用css3属性transition就可以实现,比如动态显示矩形边框线的效果,实现原因是利用过渡效果时宽高显示的时间差。 示意图 实现代码 HTML代码: <div class="border"> </div> CSS代码: .border {position: relative; width:300px; height:300px;} .border:before, .border:afte...

IE浏览器加载rem自适应网页元素尺寸显示异常

使用rem制作等比例缩放自适应网页,在IE浏览器下会出现页面加载完成后,使用了 rem 单位的网页元素尺寸显示异常的问题。原因是给body标签的 font-size 属性定义了固定大小的默认值,解决方法是把 font-size 属性值设置为 100%,直接删除该属性。 示例: 原代码 body { font:normal 16px/1.875em 'Arial'; } 修改为 body { font:normal 100%/1.875em 'Arial'; } 如果想要给网页定义默认字体大小,又不想影响rem,在bod...

使用CSS text-shadow实现文字描边效果的代码

通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果,兼容 Chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器,加上私有属性前缀,可能兼容的版本还可以提高,不过我没有测试。 网页效果: WWW.NEIRONG.ORG CSS: -o-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; -ms-text-shadow...

实现IE10/IE11支持object-fit属性的插件bideo.js

实现IE10/IE11支持object-fit属性的插件bideo.js

在响应式网页开发中 object-fit 属性是极为常用的一个css属性,遗憾的是IE浏览器全系列都不支持 object-fit 属性,但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。 PS:不支持 IE9 和 Edge 插件下载:https://github.com/rishabhp/bideo.js 插件使用 HTML代码: <!-- 引入插件 --> <script src="bideo.js"></script> <!...

CSS3实现歌词进度文字颜色填充变化动态效果

CSS3实现歌词进度文字颜色填充变化动态效果

播放音乐时,歌词会随歌曲的进度逐渐填充颜色,不是逐字改变颜色,而是从左向右横向逐个像素改变的,也就是说会出现一个字的左右两边是不同颜色的效果。 这个效果通过CSS3可以实现。 实现思路: 1、background填充一个背景颜色,以及要变化的颜色 2、-webkit-background-clip:text;裁剪出文字的背景,即是楼空文字的意思 3、-webkit-text-fill-color:transparent;把裁剪缕空的文字弄透明,这样就可以通过缕空的形状看到背景颜色,这时背景颜色就是字体的颜色 ...

CSS3响应式自适应尺寸视窗单位vw、vh详解

vw、vh、vmin、vmax是CSS3新增的视窗单位,同时也是相对单位,它相对视窗(Viewport)大小的百分比。 什么是视窗? 视窗即Viewport,是浏览器实际显示内容的区域,不包括工具栏、地址栏、书签栏。 视窗单位说明 vw - 视窗宽度的百分比,如1vw即浏览器可视窗口宽度的1%,10vw即窗口宽高的10% vh - 视窗高度的百分比,如1vh即浏览器可视窗口高度的1%,10vh即窗口高度的10% vmin - 选择当前 vw 和 vh 中的最小值,最小值被均分为100单位的vmin...

使用CSS3实现SVG路径描边动画效果入门教程

使用CSS3实现SVG路径描边动画效果入门教程

不依赖javascript,直接使用纯css实现svg的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支stroke,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、stroke 表示描边颜色。表示颜色的名字不是stroke-color,只是单纯的stroke。它的值官方称为“paint”,可选值的类型包括none、currentColor、<color>。 none - 表示没有颜色; <color> - 表...

通过纯css3代码实现六边形边框

通过纯css3代码实现六边形边框

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible; 经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。 注意: 如果不对第3层div设置v...

IE9浏览器对CSS3的支持情况参考

以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本,其余版本由于改进或修复的原因,可能已经支持之前不支持的CSS3属性,所以以下数据仅供参考。 更准确的支持情况请访问:https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85) IE9对CSS3属性的支持情况: CSS3属性 IE9支持情况 之前版本IE支持情况 ...

CSS3 Flexbox布局快速入门教程

CSS3 Flexbox布局快速入门教程

Flexbox 是是 CSS3 引入的新的布局模式,全称是 flexible box (意思是“灵活的盒子容器”)。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式: 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元...

前端移动端适配方案之rem之小白解惑

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的; 像素比(Asset)2x,就是2倍,物理像素/逻辑像素; ppi:像素密度326,实际平方英寸的光点个...

通过css修改select下拉列表框的默认样式

实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...