3种CSS3实现的网页过度效果代码，可独立用于网页设计展示

效果如下：

主要代码如下：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" /><meta name="description" content="此代码内容为3种网页过度效果代码（CSS3)，属于站长常用代码，更多其他代码代码请访问懒人图库JS代码频道。" /><title>3种网页过度效果代码（CSS3)_懒人图库</title><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="" /><meta name="keywords" content="" /><meta name="author" content="Your name" /><link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" href="css/style.css" /><link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' /></head><body><!-- Codrops top bar --><div class="codrops-top"><a href="#" target="_blank">PAGE TRANSITIONS WITH CSS3</a><span class="right"><a href="#" target="_blank"><strong>Back to the baidu.com</strong></a></span><div class="clr"></div></div><!--/ Codrops top bar --><!-- Home --><div id="home" class="content"><h2>Home</h2><p>So you want a single page website, uh? Well, if you follow this tutorial you will be able to create a very nifty one-pager. Check out the rest of the sections on this page so you can see for yourself what am I talking about.</p><p>This page consists of different panels that will slide or appear when clicking on the respective link.</p><p>With the general sibling selector we can change the color of the "selected" panel link.</p>
<p><p>3种网页过度效果代码（CSS3)，可独立用于网页设计展示，兼容主流浏览器！</p><p><br /></p><p>使用方法：</p><p>1、head区域引入css文件</p><p>2、注意对应的css类的名称</p><p>3、建议整站做移植使用</p></p>
<p></p></div><!-- /Home --><!-- Portfolio --><div id="portfolio" class="panel"><div class="content"><h2>Portfolio</h2><p>Some really nice portfolio shots:</p><ul id="works"><li><a href="http://dribbble.com/shots/394177-Sheriff-Woody"><img src="data:images/portfolio_01.jpeg" width="250"></a></li><li><a href="http://dribbble.com/shots/392403-Spaceman"><img src="data:images/portfolio_02.jpeg" width="250"></a></li><li><a href="http://dribbble.com/shots/388799-Harvey-Birdman"><img src="data:images/portfolio_03.jpeg" width="250"></a></li></ul><p class="footnote">Dribbble shots by <a href="http://dribbble.com/stuntman">Matt Kaufenberg</a>.</p></div></div><!-- /Portfolio --><!-- About --><div id="about" class="panel"><div class="content"><h2>About</h2><p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p><p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p><p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p><p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p></div></div><!-- /About --><!-- Contact --><div id="contact" class="panel"><div class="content"><h2>Contact</h2><p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p><p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p><form id="form"><p><label>Your Name</label><input type="text" /></p><p><label>Your Email</label><input type="text" /></p><p><label>Your Message</label><textarea></textarea></p></form></div></div><!-- /Contact --><!-- Header with Navigation --><div id="header"><h1>Page Transitions with CSS3</h1><ul id="navigation"><li><a id="link-home" href="#home">Home</a></li><li><a id="link-portfolio" href="#portfolio">Portfolio</a></li><li><a id="link-about" href="#about">About Me</a></li><li><a id="link-contact" href="#contact">Contact</a></li></ul><!-- Demo Nav --><nav id="codrops-demos"><a class="current-demo" href="#home">Demo 1</a><a href="index2.html#home">Demo 2</a><a href="index3.html#home">Demo 3</a></nav></div></body>
</html>

下载源码

3种CSS3实现的网页过度效果代码，可独立用于网页设计展示相关推荐

6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
html hover 效果,8种css3技术的hover动画效果
hover动画,简言之就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画! 1.简单动画 html bigsmall css .ech-big,.ech-small { trans ...
网页爬虫python代码_Python 爬虫web网页版程序代码
一:网页结构分析二:代码实战#! /usr/bin/env python2 # encoding=utf-8 #BeautifulSoup需要安装 MySQLdb import sys,os,re, ...
html网页div框架代码,div层仿网页框架布局特效代码
脚本代码(For Alixixi.com)如下: div层仿网页框架布局特效代码 - by 阿里西西 js.alixixi.com * { margin:0; padding:0; list-styl ...
手机网页导出html代码吗,手机和网页复制文档的方法，你不得不佩服的神操作！...
经常听到身边的朋友吐槽,一篇文章看起来很不错,好想复制下来哦,可是要开各种VIP各种充金币,烦不胜烦!但是一个人是否聪明往往不是取决于他的智商到底有多高,因为现在大部分的人智商基本才不多,所以智商的不 ...
html怎么筛选表格列,css3表格内容排序筛选效果
特效描述:css3 表格内容排序筛选效果,css3表格内容排序筛选效果代码结构 1. HTML代码 NFL 2001 Offensive StatsRankTeamGmsYdsYds/GRuYds ...
制作html语言网站全攻略,(网页制作HTML代码全攻略.doc
(网页制作HTML代码全攻略网页制作HTML代码全攻略第一章:HTML 语言的结构 html文件是标准的ASCII文件,它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件.从结构 ...
php中的网页漂浮代码,JavaScript_Javascript实现带关闭按钮的网页漂浮广告代码，复制代码代码如下: html - phpStudy...
Javascript实现带关闭按钮的网页漂浮广告代码带关闭按钮的网页漂浮广告代码 X ff.js代码 var xPos = 20; var yPos = document.body.clientHe ...
CSS3全屏星空动态特效代码
CSS3全屏星空动态特效代码,可用于简约的星空表白页面,大气的文字内容动态背景特效. 更多源码下载:hereitis,在这里资源站,免费软件下载,PPT.图片素材下载,精品小工具小插件
CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

3种CSS3实现的网页过度效果代码，可独立用于网页设计展示

3种CSS3实现的网页过度效果代码，可独立用于网页设计展示相关推荐

最新文章

热门文章