CSS3练习题

栀虞子

于 2022-03-05 22:36:16 发布

阅读量665

点赞数

分类专栏：学习笔记文章标签：学习 html css3 前端

本文链接：https://blog.csdn.net/qq_52476758/article/details/123302752

版权

学习笔记专栏收录该内容

20 篇文章 7 订阅

订阅专栏

1. 制作导航菜单综合练习题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>CSS制作立体导航</title>
	<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
	<style>
		body{
		  background: #ebebeb;
		}
		.nav{
		  width:560px;
		  height: 50px;
		  font:bold 0/50px Arial;
		  text-align:center;
		  margin:40px auto 0;
	      background: #f65f57;
		  /*制作导航圆角：使用border-radius实现圆角*/
		  border-radius:10px;
          /*制作导航立体风格：使用box-shadow实现立体风格*/
          box-shadow:0px 8px 0 #900;
		}
		.nav a{
		  display: inline-block;
		  -webkit-transition: all 0.2s ease-in;
		  -moz-transition: all 0.2s ease-in;
		  -o-transition: all 0.2s ease-in;
		  -ms-transition: all 0.2s ease-in;
		  transition: all 0.2s ease-in;
		}
		.nav a:hover{
		  -webkit-transform:rotate(10deg);
		  -moz-transform:rotate(10deg);
		  -o-transform:rotate(10deg);
		  -ms-transform:rotate(10deg);
		  transform:rotate(10deg);
		}
		.nav li{
		  position:relative;
		  display:inline-block;
		  padding:0 16px;
		  font-size: 13px;
		  text-shadow:1px 2px 4px rgba(0,0,0,.5);
		  list-style: none outside none;
		}		
		/*使用伪元素制作导航列表项分隔线：使用渐变与伪元素制作*/
		.nav li::after,.nav li::before{
		    content:"";
		    position:absolute;
		    top:14px;
		    height:25px;
		    width:1px;
		}
		.nav li::after{
		    right: 0;
			  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
			  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
			  background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
			  background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
			  background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
		}
		nav li::before{
		    left: 0;
			  background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
			  background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
			  background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
			  background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
			  background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
		}
        /*删除第一项和最后一项导航分隔线：使用伪元素删除第一个和最后一个分隔线*/
		.nav li:first-child::before{
    		  background: none;
			}            
    	.nav li:last-child::after{
        		  background: none;
    			}
		.nav a,
		.nav a:hover{
		  color:#fff;
		  text-decoration: none;
		}
	</style>
</head>
<body>
	<ul class="nav">
    	<li><a href="">Home</a></li>
    	<li><a href="">About Me</a></li>
    	<li><a href="">Portfolio</a></li>
    	<li><a href="">Blog</a></li>
    	<li><a href="">Resources</a></li>
    	<li><a href="">Contact Me</a></li>
	</ul>
</body>
</html>

2. 切换背景图像综合练习题

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
    	<title>CSS3 Full Background Slider </title>
        <style type="text/css">
            @importurl("http://www.w3cplus.com/demo/css3/base.css");
            @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
            html,body {
            height: 100%;
            }
            
            /*设置背景图片全屏显示，并且居中*/
            img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 50%;
            z-index:1;
              -webkit-transform: translateX(-50%);
              -moz-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
            }
            
            /*设置背景图片从左向右移入显示的动画效果*/
            /* Slide Left */
            @-webkit-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-moz-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-o-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-ms-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            
            /*设置背景图像从底部向顶部移入的动画效果*/
             /* Slide Bottom */
            @-webkit-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-moz-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-ms-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-o-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            
            /*设置背景图片由小到大放大动画效果*/
            /* Zoom In */
            @-webkit-keyframes 'zoomIn' {
            	0% { -webkit-transform: scale(0.1); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomIn' {
            	0% { -moz-transform: scale(0.1); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomIn' {
            	0% { -ms-transform: scale(0.1); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomIn' {
            	0% { -o-transform: scale(0.1); }
            	100% { -o-transform: none; }
            }
            @keyframes 'zoomIn' {
            	0% { transform: scale(0.1); }
            	100% { transform: none; }
            }
            
            /*设置背景图像由大到小缩小动画效果*/
            /* Zoom Out */
            @-webkit-keyframes 'zoomOut' {
            	0% { -webkit-transform: scale(2); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomOut' {
            	0% { -moz-transform: scale(2); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomOut' {
            	0% { -ms-transform: scale(2); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomOut' {
            	0% { -o-transform: scale(2); }
            	100% { -o-transform: none; }
            }
            @keyframes 'zoomOut' {
            	0% { transform: scale(2); }
            	100% { transform: none; }
            }
            
            /*背景图像旋转出现动画效果*/
            /* Rotate */
            @-webkit-keyframes 'rotate' {
            	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'rotate' {
            	0% { -moz-transform: rotate(-360deg) scale(0.1); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'rotate' {
            	0% { -ms-transform: rotate(-360deg) scale(0.1); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'rotate' {
            	0% { -o-transform: rotate(-360deg) scale(0.1); }
            	100% { -o-transform: none; }
            }
            @keyframes 'rotate' {
            	0% { transform: rotate(-360deg) scale(0.1); }
            	100% { transform: none; }
            }
            
            /*设置背景图像不显示动画效果*/
            @-webkit-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-moz-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-ms-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-o-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
        
            .slider {
            position: absolute;
            width: 100%;
            text-align: center;
            z-index: 9999;
            bottom: 100px;
            }
            .slider li {
            display: inline-block;
            width: 170px;
            height: 130px;
            margin-right: 15px;
            }
            .slider a {
            display: inline-block;
            width: 170px;
            padding-top: 70px;
            padding-bottom: 20px;
            position: relative;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 5px;
            vertical-align: top;
            color: #fff;
            text-decoration: none;
            font-size: 22px;
            font-family: 'Yesteryear', cursive;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
            
            /*任务一、设置不同列表的背景色:使用结构伪类选择器:nth-of-type()*/
            .slider li:nth-of-type(1) a{
            background-color: #02646e;
            }
            .slider li:nth-of-type(2) a{
            background-color: #eb0837;
            }
            .slider li:nth-of-type(3) a{
            background-color: #67b374;
            }    
            .slider li:nth-of-type(4) a{
            background-color: #e6674a;
            }    
            .slider li:nth-of-type(5) a{
            background-color: #e61061;
            }
            
            /*任务二、设置缩略图形状:使用伪元素::after制作圆形效果*/
            a::after{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 9999;
            top: -80px;
            }
            
            /*任务三、设置缩略图背景图像:使用伪结构选择器:nth-of-type()，并且配合::after*/
             li:nth-of-type(1) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
            }
             li:nth-of-type(2) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
            }
             li:nth-of-type(3) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
            }
             li:nth-of-type(4) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
            }
             li:nth-of-type(5) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
            }
            
            /*任务四、给缩略图添加蒙板效果:使用伪类选择器::before给缩略图添加蒙板效果*/
            a::before{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 99999;
            top: -80px;
            background: rgba(0,0,0,0.3);
            }
            
            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度:通过:hover和::before配合修改opacity的值为0*/
            a:hover:before{
            opacity:0;
            }
            
            /*任务六、点击缩略图，切换背景图:通过目标选择器:target进行背景图片的切换*/
            /*背景图从左向右出现*/
            .slideLeft:target{
            	z-index: 100;
            	-webkit-animation-name: slideLeft;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: slideLeft;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: slideLeft;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: slideLeft;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: slideLeft;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图从下向上出现*/
            .slideBottom:target{
            	z-index: 100;
            
            	-webkit-animation-name: slideBottom;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: slideBottom;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: slideBottom;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: slideBottom;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            animation-name: slideBottom;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图由小到大出现*/
            .zoomIn:target{
            	z-index: 100;
            	-webkit-animation-name: zoomIn;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: zoomIn;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: zoomIn;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: zoomIn;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: zoomIn;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图由大到小出现*/
            .zoomOut:target{
            	z-index: 100;
            	-webkit-animation-name: zoomOut;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: zoomOut;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: zoomOut;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: zoomOut;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: zoomOut;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图旋转出现*/
            .rotate:target{
            	z-index: 100;
            	-webkit-animation-name: rotate;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: rotate;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: rotate;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: rotate;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: rotate;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            
            /*任务七、设置不显示的背景图层级:通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示*/
            /* Not Target */
            .bg:not(:target){
            	-webkit-animation-name: notTarget;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: notTarget;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: notTarget;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: notTarget;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: notTarget;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <ul class="clearfix">
            	<li><a href="#bg1">Hipster Fashion Haircut </a></li>
        		<li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
        		<li><a href="#bg3">My haire is sooo fantastic!</a></li>
        		<li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
        		<li><a href="#bg5">Lips so kissable I could die ...</a></li>
        	</ul>
        </div>
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
    </body>
</html>

3. 制作3D旋转导航综合练习题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>制作3D旋转导航</title>
	<style>
        @import url("http://www.w3cplus.com/demo/css3/base.css");
        /*任务一：引入本地字体文件:通过CSS3的@font-face属性引入本地字体*/
        @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;			
        }
        
        .three-d {
          /* 任务三、设置3D舞台布景 */
          perspective:200px;
        	-o-perspective:200px;
        	-webkit-perspective:200px;
        	-moz-perspective:200px;
        	-ms-perspective:200px;

          /*任务四、设置3D舞台布景过渡效果*/
        	transition:all 0.7s linear;
        	-o-transition:all 0.7s linear;
        	-ms-transition:all 0.7s linear;
        	-moz-transition:all 0.7s linear;
        	-webkit-transition:all 0.7s 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 {
            transform:translateZ(-25px) rotateX(90deg);
        	-o-transform:translateZ(-25px) rotateX(90deg);
        	-ms-transform:translateZ(-25px) rotateX(90deg);
        	-moz-transform:translateZ(-25px) rotateX(90deg);
        	-webkit-transform:translateZ(-25px) rotateX(90deg);
        }
        
        .three-d-box {
          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
          transform:translateZ(-25px);
        	-o-transform:translateZ(-25px);
        	-ms-transform:translateZ(-25px);
        	-moz-transform:translateZ(-25px);
        	-webkit-transform:translateZ(-25px);
    
        	transition:all .3s ease-out;
        	-o-transition:all .3s ease-out;
        	-ms-transition:all .3s ease-out;
        	-moz-transition:all .3s ease-out;
        	-webkit-transition:all .3s ease-out;
          -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 {
            transform:rotateX(0deg) translateZ(25px);
        	-ms-transform:rotateX(0deg) translateZ(25px);
        	-o-transform:rotateX(0deg) translateZ(25px);
        	-moz-transform:rotateX(0deg) translateZ(25px);
        	-webkit-transform:rotateX(0deg) translateZ(25px);
         }
        
        .back {
            
          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;
        	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); 
         }
	</style>
</head>
<body>
	<div id="nav">
		<ul class="nav-menu clearfix unstyled">
			<li><a href="#" class="three-d active">
				Home
				<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
			</a></li>
			<li><a href="#" class="three-d">
				Services
				<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
			</a></li>
			<li><a href="#" class="three-d">
				Products
				<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
			</a></li>
			<li><a href="#" class="three-d">
				About
				<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
			</a></li>
			<li><a href="#" class="three-d">
				Contact
				<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
			</a></li>
			<li><a href="#" class="three-d">
				Blog
				<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>
				<ul class="clearfix unstyled drop-menu">
					<li><a href="#" class="three-d">
							Html5
							<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						Css3
						<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						JavaScript
						<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
					</a></li>
					<li><a href="#" class="three-d">
						Videogames
						<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
					</a></li>
				</ul>
			</li>
			<li><a href="#" class="three-d">
				Shop On-line
				<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
			</a></li>
		</ul>
	</div>
</body>
</html>

4. 制作3D旋转视频展示区

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style>
        body {
            margin-top: 5em;
            text-align: center;
        	color: #414142;
        	background: rgb(246,241,232);
        /*任务一、制作多背景*/
            background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
        	
        /*任务二、控制背景图像尺寸:使用background-size，让两层背景都是全屏显示*/
            background-size:cover;
        }
        
        h1, em, #information {
            display: block;
        	font-size: 25px;
        	font-weight: normal;
        	margin: 2em auto;
        }
        
        a {
            color: #414142;
        	font-style: normal;
        	text-decoration: none;
        	font-size: 20px;
        }
        		
        a:hover {
            text-decoration: underline;
        }
        		
        #container {
        	margin: 0 auto;
        	width: 1024px;
        }
        	
        .wrapper {
            display: inline-block;
        	width: 310px;
            height: 100px;
        	vertical-align: top;
        	margin: 1em 1.5em 2em 0;
        	cursor: pointer;
        	position: relative;
        	font-family: Tahoma, Arial;
        	-webkit-perspective: 4000px;
        	-moz-perspective: 4000px;
        	-ms-perspective: 4000px;
        	-o-perspective: 4000px;
        	perspective: 4000px;
        }
        
        .item {
            height: 100px;
        	-webkit-transform-style: preserve-3d;
        	-moz-transform-style: preserve-3d;
        	-ms-transform-style: preserve-3d;
        	-o-transform-style: preserve-3d;
        	transform-style: preserve-3d;
        /*任务三、给每个列表项添加过渡动画效果:使用transition属性，给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;*/
        	-webkit-transition: -webkit-transform .6s;
        	-moz-transition: -moz-transform .6s;
        	-ms-transition: -ms-transform .6s;
        	-o-transition: -o-transform .6s;
        	transition: transform .6s;
        }
        
        .item:hover {
        /*任务四、悬浮状态改变每个列表项的transform效果:通过transform属性，在列表悬浮状态设置 3D旋转效果：translateZ(-50px) rotateX(95deg);*/
            -webkit-transform: translateZ(-50px) rotateX(95deg);
            -moz-transform: translateZ(-50px) rotateX(95deg);
            -ms-transform: translateZ(-50px) rotateX(95deg);
            -o-transform: translateZ(-50px) rotateX(95deg);
            transform: translateZ(-50px) rotateX(95deg);
        }
        
        .item img {
            display: block;
            position: absolute;
            top: 0;
            /*任务五、设置列表项图片的圆角和阴影效果:通过border-radius和box-shadow给图像设置圆角和阴影效果。*/
            border-radius: 3px;
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            
           -webkit-transform: translateZ(50px);
           -moz-transform: translateZ(50px);
           -ms-transform: translateZ(50px);
           -o-transform: translateZ(50px);
           transform: translateZ(50px);
           -webkit-transition: all .6s;
           -moz-transition: all .6s;
           -ms-transition: all .6s;
           -o-transition: all .6s;
           transition: all .6s;
           width: 310px; 
           height: 100px;
         }
        
        .item .information {
           display: block;
           position: absolute;
           top: 0;
           height: 80px;
           width: 290px;
           text-align: left;
           border-radius: 15px;
           padding: 10px;
           font-size: 12px;
           text-shadow: 1px 1px1px rgba(255,255,255,0.5);
           box-shadow: none;
           background: rgb(236,241,244);
           /*任务六、给底层显示文本的层级设置渐变效果:使用CSS3渐变属性设置选项卡文本层的背景效果*/
           background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
           background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
           background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
        
            -webkit-transform: rotateX(-90deg) translateZ(50px);
            -moz-transform: rotateX(-90deg) translateZ(50px);
            -ms-transform: rotateX(-90deg) translateZ(50px);
            -o-transform: rotateX(-90deg) translateZ(50px);
            transform: rotateX(-90deg) translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
         }
        
        .information strong {
           display: block;
           margin: .2em 0 .5em 0;
           font-size: 20px;
           font-family: "Oleo Script";
          }
        .item:hover img {
        	/*任务七、列表项悬浮状态时，去掉图片的阴影效果:通过box-shadow去掉图片阴影效果*/
        	box-shadow:none;
            border-radius: 15px;
        }
        
        .item:hover .information {
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            border-radius: 3px;
         }
	</style>
</head>
<body>
	<div id="container">
    	<h1>CSS3 3D变形制作视频展示区</h1>
    	<div class="wrapper">
    	    <div class="item">
            	<img src="http://img.mukewang.com/545b1e900001db6d04630253.png" />
            	<span class="information">
            	<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
            	</span>
        	</div>
    	</div>
    	
    	<div class="wrapper">
        	<div class="item">
            	<img src="http://img.mukewang.com/545b1eb20001ed6a03360201.png" />
            	<span class="information">
            	<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
            	</span>
        	</div>
    	</div>
    	
    	<div class="wrapper">
        	<div class="item">
            	<img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
            	<span class="information">
            	<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
            	</span>
        	</div>
    	</div>
    	
    	<div class="wrapper">
        	<div class="item">
            	<img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
            	<span class="information">
            	<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
            	</span>
        	</div>
    	</div>
    	<div class="wrapper">
        	<div class="item">
            	<img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
            	<span class="information">
            	<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
            	</span>
        	</div>
    	</div>
    	<div class="wrapper">
        	<div class="item">
            	<img src="http://img.mukewang.com/545b1f620001874503500209.png" />
            	<span class="information">
            	<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
            	</span>
        	</div>
    	</div>
	</div>
</body>
</html>

栀虞子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3练习题

1. 制作导航菜单综合练习题2. 切换背景图像综合练习题3. 制作3D旋转导航综合练习题4. 制作3D旋转视频展示区1. 制作导航菜单综合练习题<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus..
复制链接

扫一扫

专栏目录