Bootstrap

web前端开发--动画效果

1、3D旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D旋转</title>
		<style type="text/css">
			div{/*设置大盒子样式*/
				width: 100px;
				height: 100px;
				/*background-color: rgba(255,0,0,0.5);*/
				background-color: #FFFF00;
			}
			#box2:hover{
				background-color: wheat;
				/*transform: rotateX(180deg);/*围绕X轴顺时针旋转180度*/
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div id="box1">原始效果</div>
		<div id="box2">3D旋转效果</div>
	</body>
</html>

点击时

2、简单动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单动画</title>
		<style type="text/css">
			div{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: red;
			    animation: ball 3s ease 0s 3 alternate;
				/*设置ball动画持续3s，正方向交替播放3次*/
				/*分开设置如下6行代码
				animation-name: ball;             设置动画名称
				animation-duration: 3s;            设置持续时间
				animation-timing-function: ease;  设置速度曲线
				animation-delay: 0s;               设置延续时间
				animation-iteration-count: 3;       设置播放次数
				animation-direction: alternate;    设置方向*/
			}
			@keyframes ball{
				from{
					left: 0px;
				}
				to{
					left: 300px;
					border-radius: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

会动态的 

3、背景颜色过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景颜色过渡</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #f00;
				margin: 50px auto;
				/*transition-property: background;/*设置应用过渡效果的属性*/
				/*transition-duration: 0.5s;/*过渡效果持续的时间*/
				/*transition-timing-function: ease-in-out;/*过渡的方式*/
				/*transition-delay: 0s;/*过渡效果的持续时间*/
				/*或者下面的这些*/
				transition: background 0.5s ease-in-out;
			}
			.box:hover{/*设置鼠标指针移动到块元素上时的状态*/
				background: #00f;/*改变背景颜色*/
			}
		</style>
	</head>
	<body>
		<div class="box">过渡属性</div>
	</body>
</html>

点击后

4、宠物墙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>宠物墙</title>
		<style type="text/css">
			body,ul,li,img{
				margin: 0;
				padding: 0;
				border: 0;
			}
			ul,li{
				list-style: none;
			}
			.photos{
				width: 1000px;
				height: 550px;
				margin: 50px auto;
			}
			.photos li{
				float: left;
				width: 250px;
				height: 250px;
				margin-left: 63px;
				margin-bottom: 110px;
			}
			.photos li a{
				display: inline-block;/*变为行内块元素*/
				width: 240px;
				height: 240px;
				text-align: center;
				text-decoration: none;
				color: #333333;
				font-size: 16px;
				font-family: "宋体";
				line-height: 24px;
			}
			.photos a:after{/*after选择器表示在被选元素的内容后面插入内容*/
				content: attr(title);/*把婴儿的名字显示在超链接后面*/
			}
			.photos li:nth-child(even) a{/*第偶数元素的样式*/
				transform: rotate(10deg);/*顺时针旋转10度*/
			}
			.photos img{/*图片的长宽设置*/
				width: 247px;
				height: 250px;
				transition: all 0.5s ease;/*过渡效果*/
			}
			.photos li:hover .img1{
				border-radius: 50%;/*设置第一张照片为圆形*/
			}
			.photos li:hover .img2{
				border: 5px solid #FFFF00;
				transform: rotate(-60deg);/*设置第二张照片逆时针旋转60度*/
			}
			.photos li:hover .img3{
				transform: rotate(360deg);/*设置第三张照片顺时针旋转360度*/
			}
			.photos li:hover .img4{
				box-shadow: 10px 10px 10px #333333;/*第四张照片添加阴影*/
				transform: rotate(-10deg);/*第四张照片逆时针旋转10度*/
			}
			.photos li:hover .img5{
				transform: rotateY(180deg);/*第五张图片产生3D变形沿y轴旋转180度*/
			}
			.photos li:hover .img6{
				transform: scale(1.2);/*第六张图片放大1.2倍*/
			}
			#one{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			#two .img2{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			#three{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			#four .img4{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			#five{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			#six .img6{
				padding: 10px 15px 50px 15px;
				box-shadow: 10px 10px 10px 10px #CCCCCC;
			}
			.one{
				margin: -50px;
				text-align: center;
			}
			.two{
				margin: -50px;
				text-align: center;
			}
			.three{
				margin: -50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul class="photos">
			<li id="one">
				<a href="#"title="笑笑">
					<img src="img/cat13.jpg"alt="笑笑"class="img1" />
				</a>
			</li>
			<li id="two">
				<a href="#"title="">
					<img src="img/cat8.jpg"alt="佳佳"class="img2" />
					<p class="one">佳佳</p>
				</a>
			</li>
			<li id="three">
				<a href="#"title="圆圆">
					<img src="img/cat9.jpg"alt="圆圆"class="img3" />
				</a>
			</li>
			<li id="four">
				<a href="#"title="">
					<img src="img/cat10.jpg"alt="倩倩"class="img4" />
					<p class="two">倩倩</p>
				</a>
			</li>
			<li id="five">
				<a href="#"title="乐乐">
					<img src="img/cat11.jpg" alt="月月"class="img5"/>
				</a>
			</li>
			<li id="six">
				<a href="#"title="">
					<img src="img/cat12.jpg"alt="乐乐"class="img6" />
					<p class="three">乐乐</p>
				</a>
			</li>
		</ul>
	</body>
</html>

 

 点击时，会出现

5、图片平移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片平移</title>
		<style type="text/css">
			.big{
				width: 400px;
				height: 300px;
				margin: 0 auto;
				position: relative;
				background: url(img/pic3.jpg) no-repeat;
			}
			.small{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background: url(img/cloth.jpg) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="small"></div>
		</div>
	</body>
</html>

 6、翻转导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>翻转导航条</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			nav{
				width: 960px;
				height: 40px;
				background-color: #CCCCCC;
				margin: 20px auto;
			}
			nav ul{
				list-style: none;
			}
			nav ul li{
				float: left;
				width: 120px;
				height: 40px;
			}
			nav ul li div{
				width: 120px;
				height: 40px;
				position: relative;
				perspective: 6000px;
				transition: all 0.4s ease 0s;
				transform-style: preserve-3d;/*使被转化的子元素保留其3d转换*/
			}
			nav ul li:hover>div{
				transform: rotateX(-90deg);
			}
			nav ul li span{
				position: absolute;
				top: 0;
				left: 0;
				width: 120px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			nav ul li span .no2{
				background-color: #cd7c7d;
				transform: rotateX(90deg)translateZ(20px);
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<div>
						<span class="no1">UI设计培训</span>
						<span class="no1">UI设计培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">PHP培训</span>
						<span class="no2">PHP培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">网络营销培训</span>
						<span class="no2">网络营销培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">前端开发培训</span>
						<span class="no3">前端开发培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">C++培训</span>
						<span class="no2">C++培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">IOS培训</span>
						<span class="no2">IOS培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">Android培训</span>
						<span class="no2">Android培训</span>
					</div>
				</li>
				<li>
					<div>
						<span class="no1">云计算培训</span>
						<span class="no2">云计算培训</span>
					</div>
				</li>
			</ul>
		</nav>
	</body>
</html>

 点击时

7、3D变形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D变形</title>
		<!--盒子1的样式-->
		<style type="text/css">
			div .no1{
				width: 152px;
				height: 227px;
				border: 1px solid #000000;
				position: relative;
				perspective: 230px;
			}
			div .no1 img{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;/*定义元素在不面对屏幕是不可见*/
				transition: all 1s ease 0s; 
			}
			div .no1 img.p01{
				transform: rotateY(-180deg);
			}
			div .no1:hover img.p01{
				transform: rotateY(0deg);
			}
			div .no1:hover img.p02{
				transform: rotateY(180deg);
			}
			/*盒子2样式*/
			div .no2{
				width: 152px;
				height: 227px;
				border: 1px solid #000000;
				position: relative;
				perspective: 230px;
			}
			div.no2 img{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				transition: all 1s ease 0s;
			}
			div .no2 img.p01{
				transform: rotateX(-180deg);
			}
			div .no2:hover img .p01{
				transform: rotateX();
			}
			div .no2:hover img .p02{
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
		<div class="no1"><!--盒子1-->
			<img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" />
			<img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" />
		</div>
		<div class="n02"><!--盒子1-->
			<img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" />
			<img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" />
		</div>
	</body>
</html>

 8、多种过渡效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多种过渡效果</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #FF0000;
				border: 3px #0f0 solid;
				margin: 50px auto;
				transition-property: all;
				transition-duration: 1s;
				transition-timing-function: ease-in;
				/*transition: all 1s ease-in;*/
			/*设置过渡效果的是所有属性，过渡时间为1s，过渡效果是慢速开始，逐渐加快的*/
			}
			.box:hover{
				border: 3px solid #FF0000;
				background-color: #00FF00;
				border-radius: 150px;
				box-shadow: 5px 5px 10px #000;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

结果为

 

点击后

 

9、图片的遮罩效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片的遮罩效果</title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 484px;
				border: 1px solid #ccccc;
				background: url(img/vegetable.jpg) 0 0 no-repeat;
				margin: 20px auto;
				position: relative;/*相对定位*/
				overflow: hidden;/*隐藏溢出的内容*/
			}
			.box hgroup{/*定义遮罩的属性*/
				position: absolute;/*绝对定位*/
				left: 0;
				top: -250px;
				width: 500px;
				height: 484px;
				background-color: rgba(0,0,0,0.5);/*半透明*/
			}
			.box:hover hgroup{
				position: absolute;/*绝对定位*/
				left: 0;
				top: 0;
				transition: all 0.5s ease-in;/*过渡效果*/
			}
			.box hgroup h2:nth-child(1){/*设置第一个h2元素*/
				font-size: 22px;
				text-align: center;
				color: #fffff;
				font-weight: normal;
				margin-top: 58px;
			}
			.box hgroup h2:nth-child(2){/*设置第二个h2元素*/
				font-size: 14px;
				text-align: center;
				color: #fffff;
				font-weight: normal;
				margin-top: 15px;
			}
			.box hgroup h2:nth-child(3){/*设置第三个h2元素*/
				width: 26px;
				height: 26px;
				margin-left: 120px;
				margin-top: 15px;
				background: url(img/jiantou.png) 0 0 no-repeat;
			}
			.box hgroup h2:nth-child(4){/*设置第四个h2元素*/
				width: 26px;
				height: 26px;
				margin-left: 95px;
				margin-top: 25px;
				background: url(img/anniu.png) 0 0 no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<hgroup>
				<h2>一品水果 唇齿留香</h2>
				<h2>泰国黑金刚莲雾</h2>
				<h2></h2>
				<h2></h2>
			</hgroup>
		</div>
	</body>
</html>

 

点击后

 10、平移效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>平移效果</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			#box2{
				transform: translate(100px,30px);
				/*设置水平向右移动100px，垂直向下移动30px*/
			}
		</style>
	</head>
	<body>
		<div id="box1">原始效果</div>
		<div id="box2">平移效果</div>
	</body>
</html>

 

11、设置透视效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置透视效果</title>
		<style type="text/css">
			#div1{
				margin: 0 auto;
				width: 100px;
				height: 100px;
				border: 1px solid red;
				perspective: 100px;/*设置透视效果*/
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: rgba(255,0,0,0.5);
				transition: transform 4s ease;/*设置3D旋转花费4s时间过渡*/
			}
			.box1:hover{
				transform: rotate(180deg);/*设置围绕x轴顺时针旋转180度*/
			}
			#div2{
				margin: 50px auto;
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: red;
				transition: transform 4s ease;/*不点击时的设置过渡效果**/
			}
			.box2:hover{
				transform: rotateX(180deg);/*设置围绕x轴顺时针旋转180度*/
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div class="box1">设置透视效果</div>
		</div>
		<div id="div2">
			<div class="box2">未设置透视效果</div>
		</div>
	</body>
</html>

 

点击后

12、图像的过渡作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图像的过渡作用</title>
		<style type="text/css">
			.photo{
				width: 300px;
				height: 300px;
				border: 3px solid #ff0000;
				margin: 50px auto;
				background:url(img/pic1.jpg)no-repeat center center;
				/*transition-property: all;
				transition-duration: 0.5s;
				transition-timing-function: ease-in-out;*/
				transition: all 0.5s ease-in-out;
			}
			.photo:hover{
				background: url(img/pic2.jpg) no-repeat center center;
				border: 3px solid #FF0000;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="photo"></div>
	</body>
</html>

 

点击后

13、翻转图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>翻转图片</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				margin: 20px auto;
				position: relative;
				perspective: 230px;/*设置元素与查看位置距离*/
			}
			.box img{
				position: absolute;
				left: 0;
				top: 0;
				backface-visibility: hidden;/*隐藏被旋转的div元素的背面*/
				transition: all 1s ease-in 0s;  
			}
			.box img.fan{
				transform: rotateX(-180deg);/*第二张图片显示在背面不可见*/
			}
			.box:hover img.fan{
				transform: rotateX(0deg)/*第二张图片翻转到正面，可见*/
			}
			.box:hover img.zheng{
				transform: rotateX(180deg);/*第一张图片反转到背面，不可见*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img class="zheng" src="img/mangguo1.jpg"alt=""width="200"height="200" />
			<img class="fan" src="img/mangguo2.jpg" alt=""width="200"height="200" />
		</div>
	</body>
</html>

 

翻转后

14、旋转效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转效果</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			#box2{
				transform: rotate(45deg);/*旋转45度*/
			}
		</style>
	</head>
	<body>
		<div id="box1">原始效果</div>
		<div id="box2">旋转效果</div>
	</body>
</html>

 

15、魔方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>魔方</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #000;
			}
			.magic{
				transform-style: preserve-3d;/*规定如何在3D空间中呈现被嵌套的元素*/
				animation: rotate 6s linear infinite;/*设置动画*/
			}
			@keyframes rotate{
				50%{
					transform-origin: center center;
					transform: rotateY(3600deg) rotateX(3600deg);
				}
			}
			.magic_a{
				margin: 300px;
				transform: translateZ(-150px);
			}
			.magic_b{
				transform: rotateY(90deg) translateX(150deg);
				transform-origin: right;
				position: absolute;
				top: 300px;
				left: 0;
			}
			.magic_c{
				transform: rotateY(270deg) translateX(-150px);
				transform-origin: left;
				position: absolute;
				top: 300px;
				left: 600px;
			}
			.magic_d{
				position: absolute;
				transform: translateZ(150px);
				top: 300px;
				left: 300px;
			}
			.magic_e{
				transform: rotateX(270deg) translateX(-150px) translateY(150px);
				transform-origin: bottom;
				position: absolute;
				top: 0;
				left: 450px;
			}
			.magic_f{ 
				transform: rotateX(90deg) translateZ(-150px) translateY(-150px);
				transform-origin: top;
				position: absolute;
				top: 450px;
				left: 300px;
			}
		</style>
	</head>
	<body>
		<div class="magic">
			<img class="magic_a"src="img/anniu.png"alt=""width="200"height="200" />
			<img class="magic_b"src="img/anniu.png"alt=""width="200"height="200" />
			<img class="magic_c"src="img/anniu.png"alt=""width="200"height="200" />
			<img class="magic_d"src="img/anniu.png"alt=""width="200"height="200" />
			<img class="magic_e"src="img/anniu.png"alt=""width="200"height="200" />
			<img class="magic_f"src="img/anniu.png"alt=""width="200"height="200" />
		</div>
	</body>
</html>

动态版本 

 16、缩放效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>缩放效果</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: rgba(255,0,0,0.5);
			}
			#box2{
				position: absolute;/*绝对定位*/
				left: 260px;
				top: 150px;
				background-color: red;
				transform: scale(2,1.2);/*宽度放大2倍，高度放大1.2倍*/
			}
			#box3{
				position: absolute;
				left: 260px;
				height: 150px;
				background-color: blue;
				transform: scale(0.5);/*高度和宽度均缩小为原来的一半*/
			}
		</style>
	</head>
	<body>
		<div id="box1">原始效果</div>
		<div id="box2">放大效果</div>
		<div id="box3">缩小效果</div>
	</body>
</html>

 

17、倾斜效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>倾斜效果</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			#box2{
				position: absolute;
				left: 50px;
				top: 150px;
				transform: skew(45deg,10deg);/*水平倾斜45度，垂直倾斜10度*/
			}
		</style>
	</head>
	<body>
		<div id="box1">原始效果</div>
		<div id="box2">倾斜效果</div>
	</body>
</html>

 

18、淘宝衣服放大效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘宝衣服放大效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				border: 0;
			}
			div{
				width: 200px;
				height: 200px;
				margin: 50px auto;
				overflow: hidden;
			}
			div img{
				transition: all 1s;/*设置过渡效果*/
			}
			div:hover img{
				transform: scale(1.3);/*图片放大1.3倍*/
			}
		</style>
	</head>
	<body>
		<div>
			<a href=""><img src="img/cloth.jpg"width="200"height="200" /></a>
		</div>
	</body>
</html>

 

点击后

19、改变中心点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>改变中心点</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			.box2{
				background-color: red;
				transform: rotate(45deg);/*旋转45度*/
			}
			.box3{
				background-color: yellow;
				transform-origin: 100px 100px;/*移动中心点*/
				transform: rotate(45deg);/*旋转45度*/
			}
		</style>
	</head>
	<body>
		<div class="box1">原始效果</div>
		<div class="box2">旋转效果</div>
		<div class="box3">改变中心点的旋转效果</div>
	</body>
</html>

 

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
网络安全等级保护2.0标准体系以及主要标准
Java程序员不得不会的124道面试题（含答案）
PointNet++详解与代码
详解24个经典股票技术指标（一）
JDK8&JDK17（windows-x64） 下载及环境配置
python如何使用ppip安装xlwt_python3.5 安装 xlrd xlwt 包都不成功 求解决 报错如下
Java中的安全编码实践与防御技巧
ubuntu+ROS推视频流至网络
Go语言Debug调试
什么是工业4.0？
;