为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/十天精通CSS3

搞不清楚啊

搞不清楚啊、、

sissifly

2014-12-28

源自：十天精通CSS3  9-9

关注问题 我要回答
1086
操作
收起

正在回答

1 回答

TheBigBangTheory
2015-12-31 
			@import url("http://www.w3cplus.com/demo/css3/base.css");    
			/*任务一：引入本地字体文件*/    
			@font-face {    
				font-family: 'sansationregular';    
				src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');    
				src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),    
					url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),    
					url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),    
					url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');    
				font-weight: normal;    
				font-style: normal;    
			}    
			body {    
				background-color:#edecec;    
			}    
			/* basic menu styles */    
			.nav-menu {    
			display: block;    
				background: #74adaa;    
				width:950px;    
				margin: 50px auto 150px;    
			}    
			.nav-menu > li {    
			display: inline;    
			float:left;			
    
				border-right:1px solid #94c0be;    
			}    
			.nav-menu > li:last-child {    
			border-right: none;    
			}    
			.nav-menu li a {    
			color: #fff;    
				display: block;    
				text-decoration: none;    
			/*调用本地字体*/    
				font-family: 'sansationregular';    
				-webkit-font-smoothing: antialiased;    
				-moz-font-smoothing: antialiased;    
				font-smoothing: antialiased;    
				text-transform: capitalize;    
				overflow: visible;    
				line-height: 20px;    
				font-size: 20px;    
				padding: 15px 30px 15px 31px;			
    
			}    
			/* animation domination */    
			.three-d {    
			/* 任务三、设置3D舞台布景 */    
			-webkit-perspective: 200px;    
			-moz-perspective: 200px;    
			-ms-perspective: 200px;    
			-o-perspective: 200px;    
			perspective: 200px;    
			/*任务四、设置3D舞台布景过渡效果*/    
			-webkit-transition: all .07s linear;    
			-moz-transition: all .07s linear;    
			-ms-transition: all .07s linear;    
			-o-transition: all .07s linear;    
			transition: all .07s linear;    
			position: relative;    
			}    
			.three-d:not(.active):hover {    
			cursor: pointer;    
			}    
			/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/    
			.three-d:not(.active):hover .three-d-box,    
			.three-d:not(.active):focus .three-d-box {    
			-wekbit-transform: translateZ(-25px) rotateX(90deg);    
			-moz-transform: translateZ(-25px) rotateX(90deg);    
			-o-transform: translateZ(-25px) rotateX(90deg);    
			-ms-transform: translateZ(-25px) rotateX(90deg);    
			transform: translateZ(-25px) rotateX(90deg);    
			}    
			.three-d-box {    
			/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/    
			-webkit-transition: all .3s ease-out;    
			-moz-transition: all .3s ease-out;    
			-ms-transition: all .3s ease-out;    
			-o-transition: all .3s ease-out;    
			transition: all .3s ease-out;    
			-webkit-transform: translatez(-25px);    
			-moz-transform: translatez(-25px);    
			-ms-transform: translatez(-25px);    
			-o-transform: translatez(-25px);    
			transform: translatez(-25px);    
			-webkit-transform-style: preserve-3d;    
			-moz-transform-style: preserve-3d;    
			-ms-transform-style: preserve-3d;    
			-o-transform-style: preserve-3d;    
			transform-style: preserve-3d;    
			-webkit-pointer-events: none;    
			-moz-pointer-events: none;    
			-ms-pointer-events: none;    
			-o-pointer-events: none;    
			pointer-events: none;    
			position: absolute;    
			top: 0;    
				left: 0;    
				display: block;    
				width: 100%;    
				height: 100%;    
			}    
			/*任务七、给导航设置3D前，与3D后变形效果*/    
			.front {    
			-webkit-transform: rotatex(0deg) translatez(25px);    
			-moz-transform: rotatex(0deg) translatez(25px);    
			-ms-transform: rotatex(0deg) translatez(25px);    
			-o-transform: rotatex(0deg) translatez(25px);    
			transform: rotatex(0deg) translatez(25px);    
			}    
			.back {    
			-webkit-transform: rotatex(-90deg) translatez(25px);    
			-moz-transform: rotatex(-90deg) translatez(25px);    
			-ms-transform: rotatex(-90deg) translatez(25px);    
			-o-transform: rotatex(-90deg) translatez(25px);    
			transform: rotatex(-90deg) translatez(25px);    
			color: #FFE7C4;    
			}    
			.front, .back {    
			display: block;    
				width: 100%;    
				height: 100%;    
				position: absolute;    
				top: 0;    
				left: 0;    
				background: #74adaa;    
				padding: 15px 30px 15px 31px;	
    
				color: white;    
				-webkit-pointer-events: none;    
			-moz-pointer-events: none;    
			-ms-pointer-events: none;    
			-o-pointer-events: none;    
			pointer-events: none;    
			-webkit-box-sizing: border-box;    
			box-sizing: border-box;    
			}    
			/*任务八、设置导航当前状态与悬浮状态下的背景效果*/    
			.nav-menu li .active .front,    
			.nav-menu li .active .back,    
			.nav-menu li a:hover .front,    
			.nav-menu li a:hover .back {    
			background-color: #51938f;    
			-webkit-background-size: 5px 5px;    
			background-size: 5px 5px;    
			background-position: 0 0, 30px 30px;    
			background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);    
			background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);    
				background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);    
			background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);    
			background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);    
			}    
			.nav-menu ul {    
			position: absolute;    
				text-align: left;    
				line-height: 40px;    
				font-size: 14px;    
				width: 200px;    
				-webkit-transition: all 0.3s ease-in;    
			-moz-transition: all 0.3s ease-in;    
			-ms-transition: all 0.3s ease-in;    
			-o-transition: all 0.3s ease-in;    
			transition: all 0.3s ease-in;    
			-webkit-transform-origin: 0px 0px;    
			-moz-transform-origin: 0px 0px;    
			-ms-transform-origin: 0px 0px;    
			-o-transform-origin: 0px 0px;    
			transform-origin: 0px 0px;    
			-webkit-transform: rotateX(-90deg);    
			-moz-transform: rotateX(-90deg);    
			-ms-transform: rotateX(-90deg);    
			-o-transform: rotateX(-90deg);    
			transform: rotateX(-90deg);    
			-webkit-backface-visibility: hidden;    
			-moz-backface-visibility: hidden;    
			-ms-backface-visibility: hidden;    
			-o-backface-visibility: hidden;    
				backface-visibility: hidden;    
			}    
			/*任务九、显示下拉导航菜单，并其设置一个变形效果*/    
			.nav-menu > li:hover ul {    
			display: block;    
			-webkit-transform: rotateX(0deg);    
			-moz-transform: rotateX(0deg);    
			-ms-transform: rotateX(0deg);    
			-o-transform: rotateX(0deg);    
				transform: rotateX(0deg);    
			}

挨个过一下，再过一下，就差不多了

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
十天精通CSS3
  • 参与学习       242549    人
  • 解答问题       2623    个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

3 回答only是不是没讲清楚啊？

1 回答关于几个CSS样式不是很清楚

3 回答有点费劲啊，没有::before和::after的基础 逻辑要很清楚才能实现

3 回答有几个搞不懂的问题

5 回答transform-origin问题 实在是搞不懂 求大神
搜索更多本课相关问答

搞不清楚啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信