资讯频道 → Web前端
阅读更多

11顶
1踩

Web前端

翻译新闻 在Webkit浏览器中，使用CSS3替代JavaScript效果

2010-01-22 16:40 by 资深编辑 wutao0603 评论(7) 有10672人浏览
webkit JavaScript 浏览器

众所周知，这段时间CSS3一直很火，大有成为“JavaScript杀手”的可能。此文将会介绍7个很酷的CSS3动画的示例，使用WebKit浏览器（如Google Chrome 和Safari）。


点击此处查看Demo

 

以下为Demo的代码：

Effect 1: Fade Block

html：

<div id="fade">Place mouse on  me i will fade!</div>

CSS：

#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}
.效果2: Pulsate Block

html：

<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS：

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}

	@-webkit-keyframes pulsate {
	0% { width:140px; }
	5% { width:190px; left:-25px; }
	10% { width:140px; left:0px; }
	15% { width:190px; left:-25px; }
	20% { width:140px; left:0px; }	
	40% { width:140px; }
	45% { width:190px; left:-25px; }
	50% { width:140px; left:0px;}
	55% { width:190px; left:-25px;}
	60% { width:140px; left:0px;}
	80% { width:140px; }
	100% { width:140px;  }
	}
.效果3: Nudge

html：

<div id="nudge">Place mouse on  me my text will shift!</div>

CSS：

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}
.效果4: Expand Block

html：

<div id="expand">Place mouse on  me my border will expand</div>

CSS：

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}
.效果5: Bounce Block

html：

<div id="bounce">Place mouse on  me i will bounce!</div>

CSS：

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
	@-webkit-keyframes bounce{from{margin-left:0px;}
		to{margin-left:250px;}
		}
.效果6: Spin Block
 html： 
<div id="spin">Place mouse on  me i will spin</div>

CSS：

#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}
.效果7: Accordion

html：

<div id="accordion" class="accordion">
		<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
	</div>

CSS：

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}
 
#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div:target{height:110px}

 

查看Demo：http://webdeveloperjuice.com/demos/css/css3effects.html

11
顶
1
踩
评论 共 7 条 请登录后发表评论
7 楼 徐风子 2010-01-26 11:00
感觉代码理解起来有点幸苦
6 楼 biaowen 2010-01-24 10:31
Army 写道
这个想法倒是挺先进，如果能促成一个标准倒好，就怕又是百家争芳，给前端们带来更大的麻烦。

就是就是，最后整出另一只大象，哈哈。
5 楼 坏孩子 2010-01-24 08:34
wjing63 写道
个别在FireFox中也有效果

个别效果应该是css2吧
4 楼 dieslrae 2010-01-24 00:18
效果很炫啊
3 楼 liucunliang 2010-01-22 21:00
部分在IE中 也有效果
2 楼 wjing63 2010-01-22 18:04
个别在FireFox中也有效果
1 楼 Army 2010-01-22 17:55
这个想法倒是挺先进，如果能促成一个标准倒好，就怕又是百家争芳，给前端们带来更大的麻烦。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 使用CSS3编写灰阶滤镜来制作黑白照片效果的方法

    CSS3 中的滤镜（filter）功能让我们轻松方便简单的处理图片，而不需要使用 PhotoShop 或者使用很多 JavaScript、PHP 代码。这个属性已经得到比较新的 Firefox、Safari、Chrome 浏览器支持，而且我们可以通过综合的可...

  • outlook安全模式修复_Outlook Com安全漏洞Microsoft无法修复

    outlook安全模式修复Microsoft is one of the biggest tech companies in the world, and yet their online email service, Outlook.com, does very little to protect its users from one of the most dangerous cyber cr...

  • Outlook登录hotmail账号总是弹出Windows安全中心解决办法

    1.如果你再outlook中登录hotmail时弹出Windows安全中心窗口，那说明你的hotmail账户开启了双重认证。 2.但是你发现输入Windows登录的Pin码不行，输入hotmail账号的密码也不行，其实这里应该输入应用密码。应用密码是为那些不支持双重认证的程序单独设置的密码，比如说Xbox360，WindowsPhone，或者邮箱。 3.接下来我们就需要找到这个密码， 第一步，登录你的hotmail邮箱。 第二步，点击我的Microsoft账户，跳转到账户信息管理，...

  • 判断浏览器写css,判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法：/*** 判断浏览器是否支持某一个CSS3属性* @param {String} 属性名称* @return {Boolean} true/false* @version 1.0* @author ydr.me* 2014年4月4日14:47:19*/function ...

  • 7的javascript效果的替代品使用WebKit的浏览器CSS 3演示

    Demo - 7 javascript-effect alternatives using CSS 3 for webkit browsers - Web developer juice html{text-align:center;} body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left} .bl

  • css消除全部css_消除旧版浏览器中CSS3头痛

    你已经看到了它的时间 和 时间 再次... 今天，我们将弄清楚如何在较旧的浏览器（ 包括 Internet Explorer）中征服CSS3。 让我们看一下在旧版本浏览器中呈现最重要CSS3属性的各种技术。 设置 首先，下载并包含...

  • css3中新增的变形动画属性,CSS3中Transform动画属性用法详解

    css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是...

  • svg配合css3动画_使用SVG和CSS创建边框动画效果

    svg配合css3动画View demo 查看演示Download Source 下载源Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website ...

  • 用CSS3制作50个超棒动画效果教程

    CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特...

  • html5和css3_使用HTML5和CSS3创建现代网站

    就CSS而言，您应该熟悉基于元素，类和基于ID的选择器，CSS属性的语法以及如何使用内联或外部样式表将CSS包括在Web页面中。 最后，假定您具有一些JavaScript的使用知识，例如什么是变量，函数，if语...

  • 浏览器htmlcss面试题

    浏览器/html/css面试题 持续更新 1.什么是盒模型 盒模型是规定了网页元素如何显示，元素间的相互关系。 盒模型的组成为分为以下几个部分： content（内容区）：元素的宽和高； border（边框区）：盒子的边缘； ...

  • HTML5和CSS3 WEB技术开发

    **视频 HTML5和CSS3 WEB技术开发** 课程目标： 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念： ​ 网页 ：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻...

  • HTML5+CSS、CSS3基础知识点总结

    一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 ...类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选

  • 如何优雅地实现浏览器兼容与CSS规则回退

    本文就是探讨如何优雅地应对浏览器兼容问题，包括四点：层叠机制来支持较早的浏览器，Modernizr设置辅助类来分别编写样式，使用 @supports 规则回退，简短的 JavaScript 代码实现回退。

  • 【前端系列教程之JavaScript】13_JavaScript浏览器深入解析

    浏览器在不断的演变中，并没有被要求呈现出一种特定的形态，但基本包括了如用户地址栏输入框、网络请求、浏览器文档解析、渲染引擎渲染网页、 JavaScript 引擎执行 js 脚本、客户端存储等功能。 从原理构成上分为七...

  • HTML5CSS3上-动画 转换 新特性 前端面试题部分汇总

    HTML5 CSS3HTML5 CSS3相关面试题HTML5新特性CSS3 新特性列举 5 个以上的 H5 事件微信小程序与 H5 的区别H5 的浏览器存储有哪些？简述 transform，transition，animation 的作用使用CSS怎么让Chrome支持小于12px的...

  • 【前端三剑客】CSS3 层叠样式表

    更新日期：2022/04/05 只要我们一起大笑，可怕的东西就会跑光光了。 目録1. CSS3 简介2. CSS3 边框3. CSS3 渐变4. CSS3 字体4.1 字体库格式5....CSS3（Cascading Style Sheets Level 3）层叠样式表，是 CSS 技术的升

  • html5字体阴影透明度,CSS3中Opacity透明度在IE下的特殊处理

    虽然 IE 没有支持这个 CSS 属性，但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相同效果。建议IE下的滤镜CSS在头部这样写[html][/html]以下用的代码都可写在ie.css中IE浏览器中透明度代码示例[css]opacit.....

  • c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果

    通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘，在PC版本的浏览器中，因为浏览器可用的内存比较大，用户...

  • 前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）

    它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE

Global site tag (gtag.js) - Google Analytics