css3 animation 制作闪烁的箭头
本案例主要实现箭头自相向上滑动，同时变大变透明的效果。一般在手机端起到引导用户向上滑动页面的作用。 大概思路就是用到css3动画，动画分解成三个部分：1、位移，2、缩放，3、透明度变换。 位移就是bottom或者top、left、right的变化，缩放就是width，height，透明度自然是 opacity。 箭头样 …
您当前位置: 首页 »
css实用代码
标签归档: css实用代码
css3透明渐变绘制两端透明渐变的分割线
项目需求：绘制一条两端透明渐变的分割线，样式如下： 思路：当然可以用png格式的图片来代替，这样最兼容，但是最好是用css3来制作。用到的是css3的线性渐变属性：linear-gradient与颜色透明属性rgba的结合使用 详细的css3代码很简单： .fgx{ width:100%; height:3px; ba …
解决css3引入中文字体无效问题（中文字体处理工具整合：字体转换、汉字去重复、字体剪裁）
==============2017年12月04日更新=============== 之前内容中提到的字体剪裁文件：http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0 经过测试发现对于一些中文字体并不能起到剪裁 …
一个关于@media screen and (max-width:)尺寸的问题
相信大家应该都知道使用@media screen能够解决移动web开发的多分辨率问题。可以在<head>里引用，也可以写在css里。 不过今天我发现一个问题，就是ie浏览器跟其他浏览器对 @media screen里设定的屏幕尺寸的识别是不一样的。比如@media screen and (max-width …
css绘制梯形
用css绘制梯形或者其他多边形其实是巧妙利用border来实现的。首先我们先看一个图形 其代码是 .tixing{ height: 0; width: 0; border-top: red 70px solid; border-right: blue 70px solid; border-bottom: green 7 …
超强大：用css在单个div上绘图
第一个就是一支绿色的蜡笔。 蜡笔由两个基础图形构成：矩形的笔身和三角形的笔尖。 我必须实现下面这些点来捕获真实蜡笔的感觉： 纸质包装上不同的颜色 印刷在包装上的形状和文字 条纹暗示蜡笔是圆的 明暗效果，暗示圆形的蜡笔和光源 首先，我使用 Div 和 background 颜色制作蜡笔的身体部分，从顶部到底部渐变，并使用 …
浏览器 CSS Hack 收集
所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。 Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } …
css阴影：box-shadow属性解析
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS …
css3背景色渐变
css3背景色渐变难是不难，就是麻烦。不同浏览器用法不同，还有个爱掺和的ie。。。 一. Webkit浏览器 (1) 第一种写法： background:-webkit-gradient(linear ,10% 10%，100% 100%， color-stop(0.14,rgb(255,0,0)), color-st …
css z-index属性不起作用的原因及解决方法
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况发生的条件有三个： 1、父标签 position属性为relat …