今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： Become A Member → Support Us → Going Down → Sign Up → Become A Member → ...
@font-face语法规则 @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } 说明： YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径； format：此值指的是你自定义的字体的格式...
1. [图片] 201411232307357663.jpg 2. [代码][HTML]代码 1 < span class = "shiny" >< span class = "inner-shiny" >Shiny</ span > </ span > 3. [代码][CSS]代码 1 2 3 4 5 6 7 8 ...
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（GIF录制时有卡顿，代码实现时不卡）： 最终效果： 全部代码如下： p{ width:50%; margin:0 auto; line-height:50px; font-size:50px; text-align:center; ...
之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下： 在线预览 源码下载 实现的代码。 html代码： 404 ERROR
CSS 3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中书写的顺序来定，最先写的背景在最上层，每层图片定义使用英文逗号隔开。 例如下面的代码： background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat; 根据代码可...
css3 实现翻页卡片 应用场景挺多的，比如产品信息展示效果如下 transform perspective backface-visibility transform-style jsfiddle demo
今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效，效果图如下： 在线预览 源码下载 实现的代码。 html代码： css3代码： *{ margin: 0; padding: 0;}*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}html,body{ height: 100%;}html{ background-color: #1d1d1d;}bo...
今天要给大家分享一款纯css3实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜，当鼠标经过的时候表单动画回正。效果非常炫，一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： css3代码： body { -webkit-perspe...
今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下： 在线预览 源码下载 实现的代码。 html代码： Night Tabs Typography Grid Systen ...
这是一个基于 CSS3 动画实现的图片过渡效果，共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6种效果，它们将证明 CSS3 Transform 和 Transition 属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择。 温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 效果演示 插件下载
-webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#3B90FF), color-stop(0.5,#0A0FA6)) webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] ); -webkit-gradient是background的一个属性值； webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）...
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： Windows 8 css3代码： body{ margin: 0; padding: 0; background-color: #90da15;}.wrapp{ position: absolute; top: 50%; left: 50%; width: 6...
之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： Menu 1 Submenu 1.1 Submenu 1.1.1 Submenu 1.1.2 ...
进入人人小站发现了个挺好看的文本框，圆角的，原来是利用了CSS3的效果，不过暂时只有IE9 和FF浏览器支持。 .input-text { border: 1px solid #C3CED9; border-radius: 5px 5px 5px 5px; font-size: 14px; height: 31px; line-height: 31px; margin-right: 10px; padding: 0; width: 327px; }