您的位置:编程知识库>Css3 Html5

Css3 Html5

  • 2016-12-16前端开发HTML5本地存储总结

    前端开发中,我们经常接触到浏览器,谈到浏览器,自然会想到有些页面之间是怎么共享数据的,怎么保存数据的,今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者...

  • 2016-12-15HTML5画出五星红旗

    源码: <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>中国标准国旗</title> </head> <body> <canvas id=”canvas” width=”600″ height=”400″&g...

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

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

  • 2014-11-28css3几何图形、多边图形shape研究

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

  • 2014-11-26css3实现渐变的iPhone滑动解锁效果

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

  • 2014-11-25css3文字高亮发光特效

    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...

  • 2014-11-20IE浏览器让ie支持CSS3的方法

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

  • 2014-11-17纯css3 loading动画加载效果

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

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

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

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

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

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

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

  • 2014-04-28html5 audio实现音乐播放器

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

  • 2014-01-28html5+css3做的音乐播放器按钮

    <!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: ...

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

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

  • 2013-01-16CSS与HTML5响应式图片

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

  • 2012-12-07css3 animation做的易拉罐动画效果

    查看演示下载源码 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...

  • 2012-12-07css3实现图片介绍滑动展示效果

    查看演示下载源码 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...

  • 2012-12-06css3制作的动态猫咪 有兴趣的童鞋可以学习下

    查看演示下载源码 html代码 <div class="cat"> <div class="head"></div> <div class="body"></div> <div class="left-leg"></div> <div class="right-leg&q...

  • 2012-11-16用css及jQuery实现的精美拉下菜单导航条

    预览效果:支持firefox,chrome,ie等浏览器。 html代码: <div> <div id=”navContainer”> <ul id=”nav”> <li><a href=”#”>Home</a></li> <li><a href=”#”>S...

  • 2012-10-2710个在线 CSS3 代码生成工具

    今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效。CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大的特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多...