CSS特效汇集

其他效果:http://www.cnblogs.com/hnyei/

1、透明处理:

外层DIV背景半透明,内部元素div不透明处理:

#outDiv{

  <!-- 透明处理 -->
      z-index:20;
      filter: alpha(opacity=50, Style=0); //设置透明度
}
#outDiv div  {  
      position:relative;
      z-index:30;
}

2、背景图片自适应:

当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云....,对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下....。但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法:

.bg{
  background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
  filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘scale‘)";
  -moz-background-size:100% 100%;
   background-size:100% 100%;
}

3、背景色渐变:

.linear{
  width:100%;   

  height:600px;   

  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE*/   

  background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/   

  background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ 
}

时间: 2024-11-07 12:57:11

CSS特效汇集的相关文章

css 特效

css特效 介绍两种css 特效 1,模糊滤镜 先看效果: 对比一下没有滤镜效果的界面: 通过添加css 类实现: .ui-modal-mask-blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px); } js代码: 弹出对话框时增加滤镜: if (arguments.length > 2 && s

【CSS】CSS特效集锦,视觉魔法的碰撞与融合(一)

原文:[CSS]CSS特效集锦,视觉魔法的碰撞与融合(一) 目录 前言 一.浮光掠影 二.发光球体 三.圆环进度条 四.三角形 五.有色到透明的渐变 六.模糊效果和毛玻璃效果 七.斜角标签 技术总结 知乎主页和专栏 正文 回到顶部 前言 在本文中我讲述了7种CSS的特效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方式达到效果. 回到顶部 一.浮光掠影 首先我们看第一个实现效果:在鼠

CSS特效

CSS强大的特效: 一.边框:       1. box-shadow:10px 10px 10px 10px red                   水平  垂直 模糊  延长  颜色        示例: <div style="box-shadow:10px 10px 10px 10px red;height: 70px;width: 100px;border: 1px solid red;">        测试数据       </div>    

css特效,鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果 两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

jquery + css 特效 之 一款基于jQuery/CSS3实现拼图效果的相册

今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 本章主要参照了如下文章进行学习 jquery:http://www.itmmd.com/tag/jquery.html jQuery教程(31)-jQuery插件开发之全局函数插件 jQuery教程(30)-jQuery插件开发之自定义选择符 jQuery教程(

翻滚闪烁,CSS特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>login</title> <style type="text/css" media="screen"> /* 公用样式 */ body{ margin:0; height: 0; background

翻滚闪烁,CSS特效1

1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8" /> 8 9 <title>login</title> 10 11 <style type="text/css" media="screen"> 12 13 /* 公用样式 */ 14 15 b

一个 图片 滚动 飞入的css特效

@keyframes bounceInLeft { from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity: 0;transform: translate3d(-3000px, 0, 0);} 60% {opacity: 1;transform: translate3d(25px, 0, 0);} 75% {transform: trans

css特效之旋转音乐播放器

本次需要用到的知识点有: transform setInerval 怎么添加背景音乐我会在下一篇介绍  https://www.cnblogs.com/zouwangblog/p/11097564.html 使用场景:在移动端页面上方添加一个旋转的音乐图标,音乐暂停,停止旋转,音乐播放,继续旋转,这里使用的是vue. 原理:原理很简单,使用setInerval函数来让图片每100ms旋转一次,旋转用css中的transform方法,将旋转角度设置为全局变量,这样在暂停之后继续播放能接着上次的位置