【前端开发】css+xhtml+javascript=前端开发
您的位置:前端开发>css3 html5

css3 html5

  • css3实现图片比例缩放,左右垂直居中显示

    归类:css3 html5 点击:2,653次次 时间:2015-04-30

    实现图片在指定容器内等比例缩放,并控制中上下左右居中,以前可以通过javascript 加css2 的办法来控制。 随着css3的普及,现在介绍一种单纯通过css来进行控制。 <!html> <head> <meta charset="utf-8"> <title> css3 图片等...

  • css3几何图形、多边图形shape研究

    归类:css3 html5 点击:2,708次次 时间:2014-11-28

    前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形,那么请前往百度百科,就算是我们用:after :before 这些...

  • css3实现渐变的iPhone滑动解锁效果

    归类:css3 html5 点击:3,279次次 时间:2014-11-26

    该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码实现时不卡):   最终效果: 全部代码如下: <!DO...

  • css3文字高亮发光特效

    归类:css3 html5 点击:3,441次次 时间:2014-11-25

    HTML代码 <span class="shiny"><span class="inner-shiny">Shiny</span> </span> CSS代码 body { background: #111; } .shiny { color: #F5C21B; background: -webkit-gradient(linear, left top, lef...

  • 归类:css3 html5 点击:2,586次次 时间:2014-11-20

    再也不用为迁就低版本IE而额外写代码了,直接按照现代浏览器标准写,最后加入selectivizr即可。一个字,爽! 大神们常说:PC端写css3,优雅降级才是王道。但是鉴于草根前端er们在项目组中的地位,往往无法说服领导。今天,你不用再取舍,使用本项目尽情使用css3吧 经...

  • 纯css3 loading动画加载效果

    归类:css3 html5 点击:7,637次次 时间:2014-11-17

    在线演示源码下载 html代码 <div class="inner"> <div class="load-container load1"> <div class="loader">Loading...</div> </div> <div class="load-container load...

  • css3制作火影忍着写轮眼开眼及进化过程

    归类:css3 html5 点击:843次次 时间:2014-11-17

    今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔。看过火影的朋友都知道,写轮眼是什么,这里就不多说了。下面就直接展示整个效果,上张图,先睹为快: 目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器(两种模式)兼容已...

  • 手机浏览器全屏代码,css3+html5+js控制手机浏览器全屏

    归类:css3 html5 点击:11,632次次 时间:2014-11-14

    在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态. 在线演示Demo:  Fullscreen API Example (在此Dem...

  • css仿ios7背景图片模糊效果,css3毛玻璃模糊效果

    归类:css3 html5 点击:49,449次次 时间:2014-04-28

    前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之(不记得了),国外也有之(比方说CSS tricks上的这篇”lurr...

  • 归类:css3 html5 点击:15,463次次 时间:2014-04-28

    封装一个 html5 audio 接口的 音乐播放器。html5 的音频接口,传统借助插件才能播放的时代逐渐走向历史的档案。调用其API 简单实现一个可以播放控制的播放器。目前仅实现了播放控制,进度条定位。至于开慢进,音量大小,专辑播放,歌词显示等暂时不弄。 audio 相关的...

  • 归类:css3 html5 点击:3,058次次 时间:2014-01-28

    <!DOCTYPE> <html> <head> <meta charset=”utf-8″ /> <style> body { background: #000; } header { font-family: “MicroSoft YaHei”; font-size: 30px; color: #990000; } .circle { width: 120px; height: ...

  • 使用Html5+CSS3做带提示文字的输入框

    归类:css3 html5 点击:10,849次次 时间:2013-03-12

    很久没写过技术文章了,最近一直在以Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。 HTML5出现后,我们有...

  • CSS与HTML5响应式图片

    归类:css3 html5 点击:5,437次次 时间:2013-01-16

    随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:...

  • css3 animation做的易拉罐动画效果

    归类:css3 html5 点击:1,854次次 时间:2012-12-07

    查看演示下载源码 css代码 .frame {width: 510px;height: 350px; margin:0 auto;overflow:hidden; position:relative; border:1px solid #aaa; z-index:20; background:url(h1.gif);} .frame span {display:block; width:510px; height:350px; position:absolute...

  • css3实现图片介绍滑动展示效果

    归类:css3 html5 点击:8,733次次 时间:2012-12-07

    查看演示下载源码 css代码 #info{ width:760px; margin:0 auto;} .wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;} .wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-s...

第 1 页,共 3 页123