第九章

最新推荐文章于 2021-06-07 17:28:22 发布

时刻的慌张

最新推荐文章于 2021-06-07 17:28:22 发布

阅读量1.5k

点赞数 3

本文链接：https://blog.csdn.net/hcl430422hcl/article/details/84280785

版权

1.CSS3 2D变形中有哪些变形方式？各自使用方法是什么？
(1)移动 translate(x, y):在2D平面内以X轴和Y轴为标准进行移动
(2)缩放 scale(x, y) :可以对元素进行水平/垂直方向的缩放
(3)旋转 rotate(x deg):对元素进行旋转，正值为顺时针，负值为逆时针
(4)transform-origin:调整元素转换变形的原点
(5)倾斜 skew(x deg, y deg):把元素水平方向上或向下倾斜
2.使用CSS3过渡实现的动画效果和使用animation属性实现的动画效果有什么区别？分别如何使用？
主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
过渡实现动画语法:transition: property duration timing-function delay;
animation属性实现动画:animation-name属性值：绑定动画名（@keyframes名）;
3.制作QQ彩贝高级搜索页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			

			body{
				background-color:white;
				width: 200px;
				
				border: 1px gray solid;
				padding-left: 30px;
			}
		nav{
				background: red;
				width: 160px;
				height: 5px;
			}
			.b{
				text-align: center;
			}
		
		div:hover .hide {
					opacity: 1;
					height: 100%;
				
				}
				select{
					width: 60px;
					margin: 8px;
				}
				
					    .hide{
            padding: 0 10px;
            opacity: 0;
            height: 0;
            transition: all 1s linear;


				}
				
			}
		</style>
	</head>
	<body>
		<div  class="box">
		<h2>高级搜索</h2>
		<nav></nav>
		<p><input type="text" placeholder="请输入关键词" /></p>
      <p >  <input type="button" value="搜索" /></p>
      <div class="hide">
                <select name="">
                    <option value="1">场合</option>
                </select>
                <select name="">
                    <option value="1">性别</option>
                </select>
                <select name="">
                    <option value="1">风格</option>
                </select>
                <select name="">
                    <option value="1">色系</option>
                </select>
                <select name="">
                    <option value="1">价格</option>
                </select>
                <select name="">
                    <option value="1">年龄</option>
                </select>
                <select name="">
                    <option value="1">季节</option>
                </select>
            </div>
        </div>
	</body>
</html>

在这里插入图片描述
4制作百度糯米导航信息

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
				* {
				margin: 0px auto;
			}
			
			#box {
				position: fixed;
				right: -10px;
				top: 200px;
			}
			
			#box img {
				border-radius: 5px;
				padding: 10px 10px 10px 10px;
				background: black;
			}
			
			#box span {
				line-height: 38px;
				display: inline-block;
				background: red;
				color: white;
				position: relative;
				right: 104px;
				top: 0px;
				opacity: 0;
				float: right;
				text-align: center;
				border-radius:5px ;
			}
			
			#box :hover span {
				opacity: 100;
				animation: spread 1s linear;
			}
			
			#box div {
				margin-bottom: 5px;
				position: relative;
				left: 50px;
			}
			
			@keyframes spread {
				0% {
					transform: translate(40px, 0);
				}
				100% {
					transform: translate(0px, 0);
				}
		</style>
	</head>

	<body>
		<img src="img.png" width="100%" />
		<div id="box">
			<div><span>购物车</span><img src="toolbar_05.png" /></div>
			<div><span>我的关注</span><img src="toolbar_10.png" /></div>
			<div><span>我的足迹</span><img src="toolbar_15.png" /></div>
			<div><span>我的消息</span><img src="toolbar_19.png" /></div>
		</div>

	</body>

</html>

在这里插入图片描述

5制作城市街景动画

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
			}
			div{
				background: gray;
				width: 100%;
				height: 350px;
				animation: spread  8s infinite linear alternate ;
			}
			.ac{
					background: url(img/balloon.png) no-repeat no-repeat center;
animation: ac 10s infinite linear alternate;

			}
			@keyframes ac{
					0%{
						transform: translate(-100px,0) rotate(0deg);
						
						
					}
					25%{
						transform: translate(-300px,0) rotate(30deg);
						
					}
					50%{
						transform: translate(-500px,0) rotate(60deg);
						
					}
					100%{
						transform: translate(-1250px,0) rotate(0deg);
						
					}
		}
			img:nth-of-type(1){
				position:absolute;
				top: 10px;
				height: 250px;
				width: 120px;
				right: 40px;
				transform: rotate(25deg);
				}
			 img:nth-of-type(2){
				position:absolute;
				top: 100px;
				left: 650px;
				width: 100px;
				}
			img{
				width: 300px;
			}
		 img:nth-of-type(10){
				position:absolute;
			top: 280px;
			left: 0px;
				width: 1500px;
				height: 100px;
			z-index: 0;
				
			}
			img:nth-of-type(3){
					position: absolute;				
					top: 180px;
					width: 500px;
					height: 200px;
					left: 60px;
					z-index: 5;
					
			}
				img:nth-of-type(4){
					position: absolute;	
					top: 60px;
					z-index: 7;
					left: 150px;
					height: 400px;
					width: 200px;
					}	
			
			img:nth-of-type(5){
				position:absolute;
				top: 110px;
				height: 250px;
				left: 480px;
				z-index: 2;
				width: 150px;
				
			
				}
					img:nth-of-type(9){
				position:absolute;
				top: 140px;
				left: 800px;
				z-index: 3;
				}
				img:nth-of-type(6){
				position:absolute;
				top: 320px;
				width:100%;
				left: 0px;
				height: 200px;
				z-index: 1;
				}
				img:nth-of-type(8){
				position:absolute;
				top: 270px;
				left: 80px;
				z-index:6 ;
				width: 650px;
				height: 250px;
				
				}
				img:nth-of-type(11){
				position:absolute;
				top: 270px;
				z-index: 6;
				width: 650px;
				height: 250px;
				}
				img:nth-of-type(7){
				position:absolute;
				top: 270px;
				z-index: 7;
				width: 650px;
				height: 250px;
				left: -350px;
				
				}
				img:nth-of-type(12){
				position:absolute;
				top: 270px;
				z-index: 7;
				width: 650px;
				height: 250px;
				left: 300px;
				}				
				img:nth-of-type(13){
				position:absolute;
				top: 270px;
				z-index: 7;
				width: 650px;
				height: 250px;
				right: -220px;
				}
				@keyframes spread{
					0%{
						background:plum ;
						
						
					}
					25%{
						background:black ;
						
					}
					50%{
						background:pink ;
						
					}
					100%{
						background:white;
						
					}
					
				}
		</style>
	</head>

	<body>
		<div>
			<img class="ac"  src="balloon.png" />
			<img src="beans.png" />
			
			<img src="dowEventCenter.png" />
			<img src="friendshipShell.png" />
			<img src="Glockenspiel.png" />
			<img src="groundBack.png" />
			<img src="groundFront.png" />
			<img src="groundMid.png" />
			<img src="Planetarium.png" />
			<img src="skyline.png" />
            <img src="groundMid.png" />
            <img src="groundFront.png" />
           	<img src="groundFront.png" />
		</div>
	</body>

</html>

在这里插入图片描述

时刻的慌张

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
第九章

1.CSS3 2D变形中有哪些变形方式？各自使用方法是什么？(1)移动 translate(x, y):在2D平面内以X轴和Y轴为标准进行移动(2)缩放 scale(x, y) :可以对元素进行水平/垂直方向的缩放(3)旋转 rotate(x deg):对元素进行旋转，正值为顺时针，负值为逆时针(4)transform-origin:调整元素转换变形的原点(5)倾斜 skew(x deg...
复制链接

扫一扫