效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@keyframes定义了旋转360度的操作: 样式表中.border div定义了div的基本样式,红色的10px圆形: 10个div嵌套使用; <style> @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(-360deg);

原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏右侧栏,点击显示和隐藏label实现最终效果. 代码说明 css <style> body { font-family:"Microsoft YaHei",arial,sans-serif; margin: 0px; padding: 0px; color: #666; } u

原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说明 <style> @-webkit-keyframes rotateLabel { 0%{ -webkit-transform-origin:0% 100%; -webkit-transform: rotate(0deg); } 100%{ -webkit-transform-origin:0%

css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100px;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;} /*内容器*/ .border1{position:absolute;top:-100%;left:0;width:100%;height:200%;transfo

先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 如果看完上一篇纵向滚动的朋友,就很容易理解横向滚动的实现方式了. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. @-webkit-keyframes scrollText2 { 0%{ -w

老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. CSS代码 @-webkit-keyframes scrollText1 { 0%{ -webkit-transform: trans

先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS <style> @-webkit-keyframes flash { 0%{ ; } 50%{ ; color: #ff0000; font-size: 18px; } 100%{ ; } } @keyframes flash { 0%{ ; } 50%{ ; color: #ff0000; font-size: 18px; } 100%{ ; } } .flash{ position

先看效果(把鼠标移上去看看) abcd 这个效果很简单,就是移动文字的位置模拟出震动的效果. Css <style> @-webkit-keyframes shake { 0%{ -webkit-transform:translate(2px, 2px); } 25%{ -webkit-transform:translate(-2px, -2px); } 50%{ -webkit-transform:translate(0px, 0px); } 75%{ -webkit-transform:t

先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Width为200px: .box2{ position: relative; top: 20px; left: 20px; width: 200px; height: 200px; border: 1px solid #ccc; overflow: hidden; } 3. 默认显示和翻转显示的元素H

先看看效果,把鼠标移上去看看. back front 1. 本实例需要以下元素: a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back 2. 外容器BOX的Height为200px,Width为200px: .box1{ position: relative; top: 100px; left: 100px; width: 200px; height: 200px; border: 1px solid #ccc; overflow: hidd

经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙 在HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效.HTML5水波荡漾动画特效.这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演

下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如5组可爱CSS3按钮.CSS3灰色按钮菜单 超具3D立体感等.今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演示        源码下载 2.新款CSS3按钮组合 5组可爱CSS3按钮 之前我分享

用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text-stroke可以为文字添加边框.它不但可以设置文字边框的宽度,也能设置其颜色.而且,配合使用color: transparent属性,你还可以创建镂空的字体! 语法如下: -webkit-text-stroke:宽度 颜色 接下来,为读者准备了一个实例,为段落元素添加文字描边.若浏览器不支持描边则

包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全版本下载 CSS3实现手机移动端触屏向上拖动的提示箭头动画 jQuery+HTML5弹出创意搜索框层 html5手机端的点击弹出侧边滑动菜单代码 纯css3艺术文字样式效果代码 纯css3手机页面图标样式代码 jQuery自动与手动图片切换效果下载 纯css3天气动画场景特效 HTML5填充颜色的f

ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观吧. 插件下载     效果演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaS

1.HTML5 Canvas画板画图工具 可定义笔刷和画布 今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型.粗细.颜色,也可以定义画布的大小和背景颜色等.我们也可以对这款HTML5画图工具进行扩展,让它的画图功能更加完善. 在线演示 源码下载 2.HTML5梦幻特效 可给任意元素添加魔幻效果 我们之前介绍HTML5动画特效比较多的是HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效.它可以给网页上任意元素(

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.希望能给大大家启发,并且学习. HTML5 Canvas粒子效果文字动画特效 基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线演示      源码下载 基于HTML5 Canvas的图表插件Chart.js chart.js是一款基于HTML5 Canvas的图

        目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的在WEB上制作游戏.制作报表等,并且还附带源码哦,赶快收藏吧! 下面一起来看看这些jQuery/HTML5特效应用.        1.HTML5实现中国象棋游戏        HTML5的确很强大,这款用HTML5实现的中国象棋是不是很酷,小编在这款HTML5中国象棋中玩不过电脑,你们也一起来挑战

效果网址:http://keleyi.com/keleyi/phtml/html5/5.htm 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2015元旦来个炫的html5特效-柯乐义</title><base target="_blank" /> <script type=&qu

css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环