`

CSS几种特效整理

阅读更多
css用伪类before和after制作三角形箭头网上有一堆教程代码,挺简单的。
箭头向上:
#content:before{
  position:absolute;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid #ccc;
  content:" ";
  display:block;
  width:0;
  height:0
}

位置自己调整一下即可,向下、左、右 以此类推,对于content仅有背景色而没有边框的情况下是毫无违和感的。

CSS实现div的淡入效果
@keyframes fade-in {
  0% {opacity: 0;}/*初始状态 透明度为0*/
  40% {opacity: 0;}/*过渡状态 透明度为0*/
  100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
  0% {opacity: 0;}
  40% {opacity: 0;}
  100% {opacity: 1;}
}

#应用
#wrapper {
  animation: fade-in;/*动画名称*/
  animation-duration: 1.5s;/*动画持续时间*/
  -webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}


渐变背景色
  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0f5ed7,endColorStr=#eee); /*IE 6 7 8*/
  background: -ms-linear-gradient(left, #0f5ed7,#eee); /* IE 10 */
  background:-moz-linear-gradient(left, #0f5ed7,#eee);/*火狐*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#0f5ed7), to(#eee));/*谷歌*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f5ed7), to(#eee));/* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(left, #0f5ed7, #eee); /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(left, #0f5ed7, #eee);/*Opera 11.10+*/

分享到:
评论

相关推荐

    7款外观迷人的HTML5/CSS3 3D按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家。 1、CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如5组可爱CSS3按钮、CSS3灰色按钮...

    各种css特效

    本资源集合了"各种css特效",包含好几十种精心整理的CSS效果,对于提升网页设计的视觉吸引力和用户体验具有重要作用。 1. **CSS动画(CSS Animations)**:CSS动画允许开发者创建动态过渡效果,如淡入淡出、滑动和...

    整理好的一些javascript特效

    这个压缩包“整理好的一些javascript特效”显然是一个包含了多种JavaScript实现的视觉效果集合,适用于网页设计和开发。 首先,我们看到有一个名为`index.htm`的文件。这通常是一个HTML文件,它是网页的基础结构,...

    5图变化js自己整理的1种图片展示特效

    在"5图变化js"中,开发者可能采用了以下几种技术或策略: 1. 图片轮播:利用JavaScript定时器(setInterval或requestAnimationFrame)来定期更改显示的图片,创建一种连续滚动或滑动的效果。 2. 图片淡入淡出:通过...

    HTML知识整理、网页制作基础教程 CHM.rar

     制作1px边框表格的几种方法  有关表格边框的CSS语法整理  网页设计理念  有了好的设计理念,才能规划好一个精彩的网站……  网页中的平衡、对比、连贯和留白  韩国商业网站设计分析  网页设计的布局...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧...

    30个国外精美js特效

    在"JackyTao博客小栈整理.url"这个链接中,可能包含了一位名为Jacky Tao的博主对这些特效的详细解析和使用教程。博主可能分享了如何将这些特效集成到自己的网页中,以及在实际项目中可能遇到的问题和解决方法。通过...

    javascript特效代码大全

    1. **滑动菜单**:滑动菜单是网页导航中常用的一种特效,通过JavaScript可以实现平滑的展开和收缩,提升用户体验。这通常涉及到DOM操作、事件监听和CSS属性的动态改变。 2. **轮播图**:轮播图是一种用于展示多张...

    JavaScript+网页特效

    在网页特效方面,JavaScript可以实现以下几种常见的效果: 1. 图片轮播:通过JavaScript,我们可以创建一个自动切换的图片展示,用户可以通过按钮或滑动来浏览图片。 2. 滚动条特效:例如,页面滚动到指定位置时,...

    经典javaScript流行特效2

    总的来说,"经典javaScript流行特效2"这个主题涵盖了JavaScript在网页动态效果中的应用,包括背景滚动、特效整理、源码保护以及交互式开关。学习和掌握这些技术,对于提升网页的视觉吸引力和用户体验至关重要。通过...

    网站PC端樱花掉落特效JS代码源码资源下载整理.zip

    【樱花掉落特效JS代码源码资源】是一种常见的网页动态效果,用于增强用户在浏览网站时的视觉体验。这种特效通常采用JavaScript编程语言实现,通过控制HTML元素(如图片或SVG图形)模拟樱花从屏幕顶部飘落的效果,为...

    html5 canvas烟雾消散图片切换动画特效

    在这个“html5 canvas烟雾消散图片切换动画特效”中,我们看到的是利用Canvas元素来实现的一种视觉效果,它通过烟雾消散的动画过渡,巧妙地在两张图片之间进行切换。 首先,我们要理解Canvas的基本使用。在HTML中,...

    javascript特效

    例如,你可以使用JavaScript实现以下几种常见的特效: 1. **滑动门(Sliding Panels)**:这种特效常用于导航菜单或展示内容,通过点击按钮或悬停,内容可以平滑地从一侧滑出或隐藏,提高了用户导航的便捷性。 2. ...

    网页制作基础教程

    提高页面显示速度的秘技 用CSS使网页图片半透明 网页小技巧:随心所欲的分隔线 <br> 网页常用特效整理:初级篇 网页常用特效整理:高级篇 网页常用特效整理:中级篇 <br> <br>表格...

    绝对令人的惊叹的CSS3折叠效果(3D效果)整理

    Codrops是一个提供前沿网页设计教程和资源的网站,它提供了一个3D缩略图悬停效果的教程,通过使用CSS,学习者可以制作出具有折叠悬停效果的元素,并提供了四种不同类型的折叠效果供学习者选择,帮助设计者和开发者在...

    jQuery 仿天猫商城导航菜单特效

    在"仿天猫商城导航菜单特效www.u206.com整理"这个压缩包中,可能包含了实现这一特效的HTML、CSS和JavaScript文件,你可以通过下载并查看源代码来学习和理解实现细节。在实际开发中,根据项目需求,可能还需要进行...

    2013年中秋节快乐祝福网页特效代码

    标题中的“2013年中秋节快乐祝福网页特效代码”是指一种特定的编程代码资源,用于在2013年的中秋节期间为网站增添节日氛围。这类特效代码通常是由前端开发人员编写,通过HTML、CSS和JavaScript等技术实现,旨在让...

    js部分特效代码.pdf

    根据提供的文件内容片段,可以推断出文档主要包含了使用JavaScript实现的网页特效代码。从给出的代码片段中,我们可以提炼出几个关键的知识点: 1. JavaScript基础语法:文档中包含有JavaScript的函数定义,如`...

    word版可编辑-网页设计实验报告八精心整理..pdf

    在CSS样式应用上,实验报告提到了以下几种: 1. `.a1` 使用了微软雅黑字体。 2. `.a2` 设置了24像素的字体大小,加粗,颜色为#F69,背景颜色为#FF0,创建了一种特定的链接样式。 3. `.bc` 设定了一个具有垂直滚动条...

    左右图片切换,还有flash效果的。

    在实际开发中,左右图片切换的实现方法多样,包括但不限于以下几种: 1. CSS3动画:利用CSS3的transition和transform属性,可以轻松实现平滑的图片切换。 2. JavaScript库:jQuery的滑动插件如Nivo Slider、...

Global site tag (gtag.js) - Google Analytics