今天为大家介绍一个非常炫酷的超链接特效。在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果。这些超链接特性，大都是借助伪元素、svg、HTML5动画来实现的。效果都很漂亮，不信看下面。用你的鼠标悬停在这些链接上，你就能体验和传统链接完全不一样的感觉。当然最重要的一点：你需要使用现代浏览器才能有更好的体验效果，比如谷歌浏览器或火狐浏览器。演示效果和下载请看：http://yusi123.com/3236.html1. [代码]节选其中...
效果图： 代码实现：样式部分style.css:*{margin: 0;padding: 0;
}
body{background-color: #673929;font-size: 16px;font-family: "微软雅黑"
}
#conters{margin: 0 auto;width: 900px;
}#header{height: 220px;margin-bottom: 5px;position: relative;
}
#icon-list{position: absolute;top:170px;right: 30px;width: 130px;height: 30px;/*font-size: 0;*/
}#nav{height: 30px;background: #09c;margin-bottom: 5px;font:18px...
转：http://blog.csdn.net/tangtang5963/article/details/51490107 https://segmentfault.com/a/1190000002780453#articleHeader18css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了#triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50px solid red;}
#triangle-down ...
原始图片： 效果如图： css： .box { width: 150px; padding: 3px; border: 1px solid #e5e5e5; } .img { width: 150px; height: 200px; position: relative; background: red; overflow: hidden; } .img img { width: 200px; height: 200px; top: 0; left: 50%; margin-left: -100px; position: absolute; ...
今天给大家分享一个纯html+css实现的下拉菜单。在此声明一点，源码并非出自本人之手，是同项目组一兄弟PLUTO写的。好东西嘛，所以果断拿出来和大家分享。如果有更好的想法或者建议，一定记得留言哦！好了，直接上代码：(IE6请直接越过)<!DOCTYPE html><html lang="en"><head><!-- create by pluto on 13-12-6 --><title>MENU</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta n...
工作之余写的一个类似于QQzone的菜单效果先上截图：图一为点击按钮前界面：图二为点击按钮后的界面下面上代码：<!--css部分-->
<style type="text/css">
@font-face
{font-family:‘Raphaelicons‘;src:url(font/raphaelicons-webfont.svg) format(‘svg‘),url(font/raphaelicons-webfont.woff) format(‘woff‘);font-weight:normal;
}
*
{margin:0;padding:0;border:0;list-style:none;}html, body, #container{width:100%;heig...
今天参加了一个Code Review活动，看了一个同事的写的代码，感觉满足了当前的功能实现，但是从长远来看，无论从代码复用角度还是维护上看都显得非常差。先看看需求是什么吧。需求是通过下拉框的选择不同的选项，来显示和隐藏一个文本框。同事是这样写的：Code 1<select name="select" onChange="disinput(this)"><option value="1">1</option><option value="2">2</option></select>
<input type="text" id="text" name="text" sty...
虽然css3的border-radius实现圆角很简单，但是我还是认为css2.1中好多技术还是很值得学习的，我也是后来才知道这就是传说中的滑动门技术。脑洞大开啊附上demo<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* 水平固定，垂直可拉伸圆角，核心设置大盒子固定宽度，并给大盒子一个底部背景。给标题一个顶部背景，高度由段落撑开，通过设置标题和段落的内边距达到需要的...
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法，该方法是由aka
Yuh?发明的，这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记，大家有不同意见请多拍砖:先来看看实例...
介绍《CSS揭秘》中一些例子的实现，具体如何实现请看控制台或者源代码。github地址点击前往示例个人网站(随时可能失效)第一章：引言第二章：背景与边框1.半透明边框这里是一些随便的文字2.多重边框box-shadow outLine 3.背景定位 4.边框内圆角这里是一些随便的文字5.条纹背景 6.复杂的图案 7.伪随机背景 8.连续的图形边框 This is a footnote.第三章：形状自适应的椭圆 平行四边形这里有字菱形图片菱形图片的动画效果（鼠标...
1，开始的思路公司想做直播方面的项目，并想加入弹幕的功能，直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上。所以技术老大让我研究下如何用react实现弹幕的功能。下面我就简单说下我的react弹幕折腾之路。一开始其实是两手空空，作为一个php的初级开发人员，我对前端技术掌握的很少，远不到熟练的程度。所以，我得从头学习如何用js+css实现弹幕，然后再将弹幕移植到react项目上去，这是我一开始的思路。2，中...
HTML代码HTML代码结构很简单，跟之前那篇文章使用的相同：复制代码代码如下:<div id="raysDemoHolder"> <a href="/" id="raysLogo">WebHek</a> <div id="rays"></div></div>最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。
CSS代码我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframe...
（1）使用float<div class="use-float"><div></div><div></div></div>.use-float>div:first-child{width:100px;float:left;
}
.use-float>div:last-child{overflow:hidden;
}------------------------------------------------------------------------------------------------------------------------------（2）使用table<table class="use-table"><tr><td></td><td></td></tr></table>.use-table{border-collapse:collapse;wi...
在网页中显示文字内容时，经常会碰到文字内容特别长的情况，那么这个时候为了使网页看起来比较美观和简洁，会对内容进行处理。下面我们就来看一看，如何使用css来对文字溢出部分增加...。 首先来看第一种情况，对单行文字处理。<h2>单行溢出显示...</h2><div class="single-line">
我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本
</div> 页面显示的情况是这样的。接下来...
css控制图片模糊，毛玻璃效果css控制图片上下模糊，鼠标移入模糊清除！html代码：<ul><li><div class="ig"><a class="img-box" href=""><img src="images/cust1.jpg" ><div class="burl"><img src="images/cust1.jpg" ></div><div class="burl-t"><img src="images/cust1.jpg" ></div></a><div class="text"><p>Three arm sprinkler with round base</p></div></div></li><li><div class="ig"><a class="img-box" href=""><img src...
DIV显示内容有时会超长，并把页面撑的很难看，