CSDN实训实战任务挑战-导航、弹窗与基本动态效果-CSDN博客

本文链接：https://blog.csdn.net/baibaibubaisay/article/details/121048466

一、加入基础导航栏

加入昨天写的导航栏，修改一定信息。

html

<!------导航栏------->
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>k的信息</li>
            <li>k的作品</li>
            <li>k的X</li>
            <li>k的</li>
            <li>任务进度</li>
            <li>联系k</li>
        </ul>
    </div>

css

ul li {
            list-style: none;
        }
        
        .nav {
            width: 100%;
            height: 40px;
            background-color: #535151;
        }
        
        .nav ul {
            width: 70%;
            height: 40px;
            margin: 0 auto;
        }
        
        .nav ul li {
            width: 13%;
            height: 40px;
            color: white;
            margin: 0 auto;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            cursor: pointer;
        }
        
        .nav ul li:hover {
            background-color: aqua;
            color: cadetblue;
        }

尤其注意此时的div命名，之前都是没有进行命名的，这时候如果直接导入会导致出现其他部位的内容错位，乱序等情况，所以一定要注意修改CSS里的div。

二、加入导航栏弹窗

在导航栏中加入弹窗，如下

html

<!------导航1------->
    <div class="nav">
        <ul>
            <li>首页
                <div class="tanchuang">
                    <div class="tcTop">
                        <div>
                            <p class="firstlist">title</p>
                            <p>1</p>
                            <p>2</p>
                            <p>3</p>
                            <p>4</p>
                            <p>5</p>
                            <p>6</p>
                        </div>
            </li>
            <li>k的信息</li>
            <li>k的作品</li>
            <li>k的X</li>
            <li>k的</li>
            <li>任务进度</li>
            <li>联系k</li>
        </ul>
        </div>

css相关样式（仅弹窗）

.tanchuang {
            width: 200px;
            height: 200px;
            padding: 22px;
            position: absolute;
            box-shadow: 0 5px 25px #8a8a8a;
            display: none;
            background-color: #FAFAFA;
        }
        
        .tanchuang .tcTop {
            width: 100%;
            height: 200px;
        }
        
        .tanchuang .tcTop div p {
            line-height: 20px;
            color: #727272;
            font-size: 8px;
        }
        
        .tanchuang .tcTop div .firstlist {
            font-size: 10px;
            font-weight: bold;
            color: #575153;
            margin-bottom: 24px;
        }

效果图

三、基本动态学习

一个简单的移动效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.text{
		width: 100px;
		height: 100px;
		background-color: #936D6D;
	}
	.text:hover{
		transition: all 3s ease-in-out 2s ;
		transform: translate(1000px);
		background-color: #F7060A;
	}
	</style>
</head>

<body>
	<div class="text"></div>
</body>
</html>

四种动画案例

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/css.css">
</head>

<body>
	<!------------平移动画---------------->
	<div class="box pingyi">
		<img src="image/c.jpg" alt="">
		<div class="wenzi">
			<h4>平移动画</h4>
			<p>文字说明1</p>
			<p>文字说明2</p>
			<p>文字说明3</p>
		</div>
	</div>
	<!------------旋转动画---------------->
	<div class="box xuanzhuan">
		<img src="image/TIM图片20180531151419.jpg" alt="">
		<div class="wenzi">
			<h4>旋转动画</h4>
			<p>文字说明</p>
			<div class="kuang"></div>
		</div>
	</div>
	<!------------斜切动画---------------->
	<div class="box xieqie">
		<img src="image/TIM图片20180531151427.jpg" alt="">
		<div class="wenzi">
			<h4>斜切动画</h4>
			<p>文字说明</p>
		</div>
	</div>
	<!------------缩放动画---------------->
	<div class="box suofang">
		<img src="image/TIM图片20180531151458.jpg" alt="">
		<div class="wenzi">
			<h4>缩放动画</h4>
			<p>文字说明</p>
			<div class="kuang"></div>
		</div>
	</div>
</body>
</html>

css样式

@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}
.box{
	width:480px;
	height: 300px;
	overflow: hidden;
	position: relative;
	float: left;
}
.wenzi{
	position: absolute;
	top:0;
	left: 0;
	padding: 20px;
	color: #FAF8F8;
}
.box:hover img{
	opacity: 0.7;
	transition:all 3s ease-in;
}
}
.pingyi{
	background-color: #000000;
}
.pingyi .wenzi p{
	color: #747373;
	background-color:#FFFFFF; 
	margin-top: 5px;
	transform: translate(-300px);
}

.pingyi:hover .wenzi p{
	transform: translate(0);
	transition:all 1s ease-in;
}
.pingyi:hover .wenzi p:nth-of-type(1){
	transition-delay:0.2s;
}
.pingyi:hover .wenzi p:nth-of-type(2){
	transition-delay:0.4s;
}
.pingyi:hover .wenzi p:nth-of-type(3){
	transition-delay:0.6s;
}

.xuanzhuan{
	background-color:#040000;
}
.xuanzhuan .wenzi{
	width: 100%;
	height: 100%;
	padding: 0px;
}
.xuanzhuan .wenzi  h4{
	margin-top: 15%;
	margin-left: 15%;
}
.xuanzhuan .wenzi  p{
	margin-top:5px;
	margin-left: 15%;
	transform: translate(0,100px);
	opacity: 0;
}
.xuanzhuan .wenzi .kuang{
	width: 80%;
	height: 80%;
	border:2px #FBF5F5 solid ;
	position: absolute;
	top:10%;
	left:10%;
	transform: translate(0,-300px) rotate(0Deg);
	}
.xuanzhuan:hover .kuang{
	transform: translate(0,0) rotate(360Deg);
	transition:all 1s ease-in;
}
.xuanzhuan:hover .wenzi p{
	transform: translate(0,0);
	opacity: 1;
	transition:all 1s ease-in;
}
.xieqie{
	background-color: #000000;
}
.xieqie .wenzi{
	top:15%;
	left: 15%;
	color: #FCF4F4;
}
.xieqie .wenzi p{
	margin-top: 5px;
	transform: skew(90deg)
}
.xieqie .wenzi h4{
	transform: skew(90deg)
}
.xieqie:hover .wenzi h4,
.xieqie:hover .wenzi p{
	transform: skew(0deg);
	transition: all 1s ease-in;
}
.suofang{
	background-color: #000000;
}
.suofang .wenzi{
	width: 100%;
	height: 100%;
	padding: 0px;
}
.suofang .wenzi h4{
	margin-top: 15%;
	margin-left: 15%;
	color: #FBFAFA;
	font-weight: bold;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.suofang .wenzi p{
	margin-top: 5px;
	margin-left: 15%;
	color: #FBFAFA;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.suofang .wenzi .kuang{
	width: 80%;
	height: 80%;
	border: 2px solid #FAF2F2;
	position: absolute;
	top:10%;
	left:10%;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.suofang:hover img{
	transform: scale(1.1,1.1)
}
.suofang:hover .wenzi h4,.suofang:hover .wenzi p,.suofang:hover .wenzi .kuang{
	transform: scale(1,1);
	opacity: 1;
	transition: all 1s ease-in;
}

最后的结果是四个并排的图片，然后图片内有相关文字的动画，