IInterest'Blog

虽然CSS3里我们还很远,但它带给我们的惊喜总是让我们不断的憧憬着CSS3未来,下面我们来看看目前webkit内核的浏览器所支持的一些CSS3特效.请用Safari 4+ 或 Chrome观赏:)

1.旋转效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> <style type="text/css" media="screen"> @-webkit-keyframes pulse { from { -webkit-transform: rotate(0deg); } to { /* -webkit-transform: rotate(20deg); -webkit-transform: scale(2); */ -webkit-transform: rotate(180deg) scale(2); } } .pulse { _-webkit-animation: pulse 4s alternate 2; -webkit-animation-name: pulse; -webkit-animation-duration: 4s; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: 4; width: 300px; height: 100px; background: green; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial; } </style> </head> <body> <div class="pulse"> <p>Welcome to iinterest</p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

2.进阶旋转效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> <style type="text/css" media="screen"> @-webkit-keyframes pulse { 0% { } 50% { -webkit-transform: rotate(-180deg) scale(5); } 100% { -webkit-transform: rotate(-360deg) scale(2.5); } } .pulse { -webkit-animation: pulse 4s alternate 2; width: 300px; height: 100px; background: green; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial; } </style> </head> <body> <div class="pulse"><p>Welcome to iinterest</p></div> </body> </html>

提示：你可以先修改部分代码再运行。

3.颜色渐变

提示：你可以先修改部分代码再运行。

4.平滑滚动

提示：你可以先修改部分代码再运行。

5.运用平滑滚动的实例

提示：你可以先修改部分代码再运行。

6.倒影效果

提示：你可以先修改部分代码再运行。

7.遮罩

提示：你可以先修改部分代码再运行。

一些CSS3的特效

2 Responses to 一些CSS3的特效

发表评论取消回复

搜索

分类

最新日志

文章

功能

一些CSS3的特效

2 Responses to 一些CSS3的特效

发表评论 取消回复

搜索

分类

最新日志

文章

标签云

功能

发表评论取消回复