case 5

最新推荐文章于 2024-06-11 22:02:21 发布

爱小黄

最新推荐文章于 2024-06-11 22:02:21 发布

阅读量177

点赞数 1

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/weixin_44110581/article/details/112234163

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

动画

<!DOCTYPE html>
<!-- 
 transition 过渡
 transform 变换
 @keyframes from to 动画
 
 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>9种css动画</title>
		<link rel="stylesheet" type="text/css" href="css/demo2.css"/>
		<link rel="icon" sizes="any" mask="" href="./img/baidu.svg">
		<style>
			@charset "utf-8";
			*{padding: 0;margin: 0;}
			figure{
				width: 33.3%;
				height: 365px;
				float: left;
				overflow: hidden;
				position: relative;
			}
			img{
				height:100%;
				transition: all 1s;
			}
			figure:hover img{
				-webkit-transform: translateX(-10px);
				-moz-transform: translateX(-10px);
				-ms-transform: translateX(-10px);
				-o-transform: translateX(-10px);
				transform: translateX(-10px);
				opacity: 0.5;
			}
			ul,li{
				list-style: none;
			}
			h2,p,li,div{
				position: absolute;
				transition: all 0.5s;
				color: #000;
			}
			/* 动画1 */
			.effect1 h2{
				
				left:10%;
				bottom:30%;
				
			}
			.effect1 p{
				
				left:10%;
				top:100%;
				color: #000;
			}
			.effect1:hover h2{
				-webkit-transform: translateY(-15px);
				-moz-transform: translateY(-15px);
				-ms-transform: translateY(-15px);
				-o-transform: translateY(-15px);
				transform: translateY(-15px);
			}
			.effect1:hover p{
				/*-webkit-transform: translateY(-30px);
				-moz-transform: translateY(-30px);
				-ms-transform: translateY(-30px);
				-o-transform: translateY(-30px);
				transform: translateY(-30px);*/
				top:80%;
			}
			/* 动画2 */
			.effect2 h2{
				top:20%;
				left:15%;
			}
			.effect2 ul li{
				background-color: #fff;
				color: #000;
			}
			.effect2 ul li:nth-child(1){
				top:45%;
				left:15%;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(2){
				top:55%;
				left:15%;
				-webkit-transition-delay: 0.2s;
				-moz-transition-delay: 0.2s;
				-ms-transition-delay: 0.2s;
				-o-transition-delay: 0.2s;
				transition-delay: 0.2s;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(3){
				top:65%;
				left:15%;
				-webkit-transition-delay: 0.4s;
				-moz-transition-delay: 0.4s;
				-ms-transition-delay: 0.4s;
				-o-transition-delay: 0.4s;
				transition-delay: 0.4s;
				-webkit-transform: translateX(-300px);
				-moz-transform: translateX(-300px);
				-ms-transform: translateX(-300px);
				-o-transform: translateX(-300px);
				transform: translateX(-300px);;
			}
			.effect2:hover ul li{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			/* 动画3 */
			.effect3 h2{
				top:20%;
				left:15%;
			}
			.effect3 p{
				width: 100%;
				bottom: 0;
				color: #000;
				background-color: #fff;
				line-height: 24px;
				text-indent: 32px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);;
			}

			.effect3:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 动画4 */
			.effect4 div{
				width: 150%;
				height:50%;
				top:100%;
				background-color: #fff;
				-webkit-transform-origin: 0% 0%;
				-moz-transform-origin: 0% 0%;
				-ms-transform-origin: 0% 0%;
				-o-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
				/*-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);*/
			}
			.effect4:hover div{
				-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);
			}
			.effect4 ul li{
				bottom: 25px;
				color: #000;
				font-size: 18px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect4 ul li:nth-child(2){
				right:30px;
				-webkit-transition-delay: 0.1s;
				-moz-transition-delay: 0.1s;
				-ms-transition-delay: 0.1s;
				-o-transition-delay: 0.1s;
				transition-delay: 0.1s;
			}
			.effect4 ul li:nth-child(1){
				right:90px;
			}
			.effect4:hover ul li{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 动画5 */
			.effect5 h2{
				left:20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect5:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			.effect5 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect5:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			.effect5 div{
				width: 70%;
				height:70%;
				left:15%;
				top:15%;
				border:2px solid #f66;
				-webkit-transform:  translateY(-350px) rotate(0);
				-moz-transform:  translateY(-350px) rotate(0);
				-ms-transform: translateY(-350px) rotate(0);
				-o-transform:  translateY(-350px) rotate(0);
				transform:  translateY(-350px) rotate(0);
			}
			.effect5:hover div{
				-webkit-transform:translateY(0) rotate(360deg) ;
				-moz-transform:translateY(0) rotate(360deg) ;
				-ms-transform:translateY(0) rotate(360deg) ;
				-o-transform:translateY(0) rotate(360deg) ;
				transform:translateY(0) rotate(360deg) ;
			}
			/* 动画6 */
			.effect6 h2{
				top:20%;
				left:10%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6 p{
				left:10%;top:30%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6:hover h2,.effect6:hover p{
				-webkit-transform: skew(0);
				-moz-transform: skew(0);
				-ms-transform: skew(0);
				-o-transform: skew(0);
				transform: skew(0);
			}
			/* 动画7 */
			.effect7 img{
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 div{
				width: 70%;
				height:70%;
				border: 2px solid #000;
				left:15%;
				top:15%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 h2{
				left:20%;top:20%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 p{
				left:20%;top:40%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7:hover *{
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			/* 动画8 */
			.effect8 h2{
				left: 20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect8:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}

			.effect8 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(30px);
				-moz-transform: translateY(30px);
				-ms-transform: translateY(30px);
				-o-transform: translateY(30px);
				transform: translateY(30px);
				opacity: 0;
			}
			.effect8:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}
			.effect8 #borderW{
				/*width: 80%;
				height:70%;
				left: 10%;
				top:15%;
				border: 1px solid #fff;
				border-left:0;
				border-right: 0;
				-webkit-transform: scale(0,1);
				-moz-transform: scale(0,1);
				-ms-transform: scale(0,1);
				-o-transform: scale(0,1);
				transform: scale(0,1);*/
				width: 0;
				left:50%;
				height:70%;
				top:15%;
				border: 1px solid #000;
				border-left:0;
				border-right: 0;
			}
			.effect8:hover #borderW{
				/*-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);*/
				left:10%;
				width: 80%;
				
			}
			.effect8 #borderH{
				width: 70%;
				height:80%;
				left:15%;
				top:10%;
				border:1px solid #000;
				border-top:0;
				border-bottom:0;
				-webkit-transform: scale(1,0);
				-moz-transform: scale(1,0);
				-ms-transform: scale(1,0);
				-o-transform: scale(1,0);
				transform: scale(1,0);
			}
			.effect8:hover #borderH{
				-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);
			}

		</style>
	</head>
	<body>
		<!-- 动画1 -->
		<figure class="effect1">
			<img src="img/pic1.jpg"/>
			<h2>平移动画</h2>
			<p>最简单的平移动画</p>
		</figure>
		<!-- 动画2 -->
		<figure class="effect2">
			<img src="img/pic2.jpg"/>
			<h2>平移动画</h2>
			<ul >
				<li>多条图片简介文字</li>
				<li>逐一飞入动画</li>
				<li> 利用动画延时达到效果</li>
			</ul>
		</figure>
		<!-- 动画3 -->
		<figure class="effect3">
			<img src="img/pic3.jpg"/>
			<h2>底部滑出动画</h2>
			<p>
				translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。
			</p>
		</figure>
		<!-- 动画4 -->
		<figure class="effect4">
			<img src="img/pic4.jpg"/>
			<div></div>
			<ul>
				<li>info1</li>
				<li>info2</li>
			</ul>
		</figure>
		<!-- 动画5 -->
		<figure class="effect5">
			<img src="img/pic5.jpg"/>
			<h2>旋转飞入</h2>
			<p>通过旋转和位移</p>
			<div></div>
		</figure>
		<!-- 动画6 -->
		<figure class="effect6">
			<img src="img/pic6.jpg"/>
			<h2>扭曲飞入飞</h2>
			<p>去通过扭曲和位移，制作出飞入的效果。扭曲属到达90度。元素就看不见了</p>
		</figure>
		<!-- 动画7 -->
		<figure class="effect7">
			<img src="img/pic7.jpg"/>
			<div></div>
			<h2>缩放</h2>
			<p>缩放缩放缩放缩放缩放</p>
		</figure>
		<!-- 动画8 -->
		<figure class="effect8">
			<img src="img/pic8.jpg"/>
			<h2>绘制线条效果</h2>
			<p>通过缩放属性绘制边框线条</p>
			<div id="borderW"></div>
			<div id="borderH"></div>
		</figure>
		<!-- 动画9 -->
		<figure class="effect9">
			<img src="img/pic9.jpg"/>
		</figure>
		
	</body>
</html>
图标字体

在这里插入代码片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<style type="text/css">
		.box{
			height: 200px;
			width: 200px;
			margin: 200px;
			background-color: red;
			animation: bgc 5s infinite;
			/* infinite 无限循环 */
			opacity: 0.3; /* 透明度 */
		}
		.box:hover{
			width: 600px;
			transition: width 2s , transform 2s ,skew 3s;
			-webkit-transition: width 2s;
			/* 
在 CSS 中，background-position 属性是 可动画化（animatable） 的。
Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。
Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。 */
			transform: rotate(7deg);
			transform:scale(2);
			/* transform:skew(30deg,30deg); */
			
		}
		@keyframes bgc{
			/* 0% */from{
				background-color: #FF0000;
			}
			/* 100% */to{
				background-color:#EEEEEE;	
			}
		}
	</style>
	</head>
	<body>
		<!-- 2n+1 奇数 -->
		<!-- 
			Font Awesome 是一套绝佳的图标字体库和CSS框架。
			Font Awesome 字体为您提供可缩放矢量图标,
		-->
		<p>它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 </p>
		<p>您可以使用前缀 
		<span style="color: red;">fa </span>
		和图标的名称来放置 Font Awesome 图标。</p>
		<span class="fa fa-navicon"></span>
		<span class="fa fa-wechat"></span>
		<span class="fa fa-qq fa-lg"></span>
		
		<ul class="fa-ul">
			<li class="fa fa-li"></li> 
		</ul>
		<p>CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

</p>
<p>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。</p>
<p>动画</p>
		<div class="box">
		</div>
	</body>
</html>

keyframes

css

/* 初始化 */
		@font-face {
		font-family: 'FontAwesome';
		src: url('../fonts/fontawesome-webfont.woff2');
		font-weight: normal;
		font-style: normal;
		}
* {
	padding: 0;
	margin: 0;
}

.img {
	vertical-align: bottom;
}

/* 元素选择器 */
li {
	/* 列表样式 */
	list-style: none;
}

a {
	/* 下划线 */
	text-decoration: none;
}

/* 公共样式 */
.w {
	width: 1280px;
	margin: 0 auto;
}

.bd {
	border: 1px solid red;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}

/* 特殊 */
header {
	height: 822px;
	width: 100%;
	background: url(../images/oshin-slide-1.jpg) no-repeat center;
	background-color: #e0eff4;
}

.head {
	width: 1280px;
	background-color: transparent;
	position: fixed;
	z-index: 100;
}
.back{
	position: relative;
}
.back a
{
	position: absolute;
	right: 0px;
	bottom: -700px;
	background-color: #E0A240;
	display: block;
	height: 50px;
	width: 50px;
}
.back a::after {
	content: "";
	position: absolute;
	right: 45%;
    top: 50%;
	width: 5px;
	height: 5px;	
	display: block;
	border: 2px solid #000000;
	border-left-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(-45deg);
}	

.logo {
	padding-top: 25px;
	padding-bottom: 25PX;
	margin-right: 152px;
}

/* 解决 ul和a的问题*/

.navigetion {}

.navigetion a {
	color: black;
	display: block;
	font-size: 8px;
	line-height: 99px;
	margin-right: 43px;
}

.navigetion>li:hover {
	text-shadow: red 1px 0px;
	transition: text-shadow 2s;
}

.navigetion a:hover {
	color: #e0a240;
}

.navigetion>li:hover .subnav {
	/* 限制为子元素 */
	display: block;
	position: absolute;
}

.subnav a {
	color: white;
}

.subnav>li {
	background-color: #393939;
	display: block;
}

.subnav {
	display: none;
}

.subnav>li:hover {
	background-color: #000000;
}

.subnav a:hover {
	color: white;
}

.navigetion_fonts {
	padding-top: 40px;
	padding-right: 12px;
}

.navigetion_fonts span {
	font-size: 18px;
	margin-right: 22px;
	transition: transform 0.5s;
}

.navigetion_fonts span:hover {
	transform: rotate(180deg);
}

/* stylist */

.stylist {
	width: 364px;
	height: 116px;
	margin: 0px auto;
	border: 6px solid transparent;
	text-align: center;
	position: relative;
	top: 340px;
	animation: stylist_move 4s infinite;
	-webkit-animation: stylist_move 7s infinite;
}

@keyframes stylist_move {
	0% {
		border-top: 6px solid #000000;
	}

	25% {
		border-right: 6px solid #000000;
	}

	50% {
		border-bottom: 6px solid #000000;
	}

	75% {
		border-left: 6px solid #000000;
	}

	100% {
		border: 6px solid transparent;
	}
}

.stylist h1 {
	font-size: 50px;
	line-height: 116px;
	font-weight:15px;
	letter-spacing: 14px;
}

.stylist::before {
	content: "MAKING THE WEB";
	word-spacing: 8px;
	letter-spacing: 8px;
	color: #000000;
	font-weight: 50px;
	width: 364px;
	height: 50px;
	display: block;
	margin: 0px auto;
	position: absolute;
	top: -40px;
	animation: stylist_before_move 4s;
	-webkit-animation: stylist_before_move 3s;
}

@keyframes stylist_before_move {
	from {
		font-size: 0px;
		content: "";
		top: -300px;
		color: white;
	}

	to {}
}

.stylist::after {
	content: "The Best of Nothing";
	font-style: italic;
	width: 364px;
	height: 50px;
	word-spacing: 1px;
	letter-spacing: 6px;
	display: block;
	margin: 0px auto;
	position: absolute;
	bottom: -85px;
	animation: stylist_after_move 4s;
	-webkit-animation: stylist_after_move 3s;
}

@keyframes stylist_after_move {
	from {
		color: white;
		bottom: -600px;
		content: "";
		font-size: 0px;
	}

	to {}
}

/* 以下是main区 */
.main {
	height: 800px;
	text-align: center;
}

.we {
	position: relative;
}

.we h2 {
	margin-top: 103px;
}

.we h2:hover {
	text-shadow: 1px 2px 10px;
	transition: text-shadow 2s;
}

.we .p1 {
	font-weight: 100;
	line-height: 115px;
	font-style: italic;
	animation: we_p_move 1s infinite;
	-webkit-animation: we_p_move 2s infinite;
}

.we .p1:hover {
	transform: scale(1.1, 1.1);
	transition: transform 2s;
}

@keyframes we_p_move {
	from {
		text-shadow: 1px 1px 5px;
	}

	to {
		text-shadow: 1px 1px 1px;
	}
}

.we .p2 {
	line-height: 35px;
	animation: we_p_move 1s infinite;
	-webkit-animation: we_p_move 2s infinite;
}


.we div::before {
	content: "";
	display: block;
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	position: absolute;
	left: -50px;
	top: 50px;
	transform: rotate(-45deg);
}

.we div {
	margin: 0 auto;
	height: 8px;
	width: 8px;
	background-color: #e0a240;
	margin-bottom: 36px;
	transform: rotate(45deg);
	top: 20px;
}

.we:hover div {}

.we div::after {
	content: "";
	display: block;
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	position: absolute;
	margin-left: 50px;
	top: -50px;
	transform: rotate(-45deg);
}

.we img {
	padding-top: 100px;
}

.we img:hover {
	transform: translateX(-100px);
	transition: transform 2s;
}

.demos {
	/* 文字用行高居中 */
	text-align: center;
	background-color: #edf0f2;
}

.demo {
	width: 320px;
	padding-top: 41px;
	padding-bottom: 93px;
	float: left;
}

.demo:hover {

}

.demo:nth-child(2n) {
	background-color: #edf0f2;
}

.demo:nth-child(2n+1) {
	background-color: #f2f5f8;
}

.demo span {
	font-size: 80px;
	line-height: 105px;
}

.demo:nth-child(2n):hover {
	transform: rotate(360deg);
	transition: transform 1s;
}

.demo:nth-child(2n+1):hover {
	transform: scale(0.75);
	transition: transform 1s;
}

.phone {
	margin: 70px 0;
	padding: 30px 0;
	background: url(../images/iphone-oshin-513x1024.png) no-repeat center;
	background-size: 329px 681px;
}

.mode {
	width: 280px;
	float: left;
	text-align: left;
	padding-bottom: 30px;
}

.mode:nth-child(2n) {
	float: right;
}

.mode:nth-child(2n+1) {
	margin-right: 700px;
}

.mode span {
	float: left;
	color: #E0A240;
	font-size: 30px;
	line-height: 180px;
	margin-right: 30px;

}

.mode:nth-child(2n+1) span:hover {
	transform: rotate(180deg);
	transition: transform 1s;
}

.mode:nth-child(2n) span:hover {
	transform: scale(0.8);
	transition: transform 1s;
}

.mode h3 {
	margin-top: 20px;
	font-size: 11px;
	line-height: 53px;
}

.mode p {
	font-size: 7px;
	line-height: 25px;
}

.book {
	height: 400px;
	width: 100%;
	background: url(../images/wanderlust01.jpg) no-repeat ;
	background-size: 100%;
	background-attachment: fixed;
	margin: 0 auto;
}

.alls {
	width: 600px;
	margin: 0 auto;
	margin-bottom: 50px;;
}

.alls .all {
	padding: 20px;
	float: left;
}
.imgs{
	
}
.imgs img {
	width: 375px;
	height: 218px;
	margin-right: 39px;
	margin-bottom: 39px;
}
.imgs img:nth-child(2n):hover{
	transform: scale(0.8);
	transition: transform 1s;
}
.imgs img:nth-child(2n+1):hover{
	transform: rotate(360deg) scale(0.8);
	transition: transform 2s;
}
.viewall{
	width: 159px;
	border: 3px solid black;
	text-align: center;
	line-height: 44px;
	margin: 0 auto;
}

.bird{
	padding-top: 100px;
	margin-top: 44px;
	height: 360px;
	line-height: 40px;
	background-color: #f2f3f8;
}
.pup_imgs{
	width: 1280px;
	margin: 0 auto;
}
.pup_imgs img{
	width: 47%;
	float: left;
	margin-left: 25px;
}
.pup_imgs img:hover{
	transform:  scale(0.9);
	transition: transform 2s;
}
.touch{
	background-color: #000000;
	height: 155px;
	color: white;
	padding-top: 101px;
	padding-bottom: 80px;
	line-height: 50px;
}
.touch h2{
	
}
.buy{
	width: 110px;
	height: 44px;
	background-color: #E0A240;
	margin: 0 auto;
	margin-top: 30px;
	
}
footer{
	height: 500px;
	background-color: #f2f3f8;
}
.foot
{
	padding-top: 70px;
	height: 429px;
}



.foot .four{
	float: left;
	width: 318px;
	height: 100px;
	color: #a8c3c8;
	text-align: left;
	line-height: 26px;

}
.foot .four h4{
	line-height: 56px;
	color: #4a4a4a;
	word-spacing: 2px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.foot .four:nth-child(1) img{
	margin-bottom: 35px;
}
.foot .four:nth-child(1) span{
	text-align: center;
	width: 59px;
	line-height: 59px;
	color: #ffaa00;
	font-size: 30px;
	border: 1px solid red;
	border-radius: 100px;
	margin-right: 14px;
	margin-top: 37px;
}
.foot .four:nth-child(2) {
	line-height: 30px;
}
.foot .four:nth-child(2) .p_img {
}
.foot .four:nth-child(2) .p_img::before{
	content: "";
	display: block;
	width: 50px;
	height: 33px;
	background-image: url(../images/oshin-ipad-mock-50x34.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
	margin-top: 15px;
	margin-right: 10px;
	float: left;
	
}
.foot .four:nth-child(3) ul{
}
.foot .four:nth-child(3) ul li{
	margin-left: 20px;
	padding-bottom: 3px;
	line-height: 50px;
	position: relative;
}
.foot .four:nth-child(3) ul li::before{
	content: "";
	position: absolute;
	left: -25px;
	top: 20px;
	width: 5px;
	height: 5px;	
	display: block;
	border: 2px solid #000000;
	border-left-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(45deg);
}
.foot .four:nth-child(3) ul li:hover::before{
	border: 2px solid #ffaa00;
	border-left-color: transparent;
	border-bottom-color: transparent;
}
.foot .four:nth-child(4) img{
	height: 67px;
	width: 67px;
	float: left;
	margin: 0 16px 16px 0;
}



.copyright{
	width: 100%;
	background-color: #cecece;
	vertical-align: center;
	line-height: 66px;
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
	</head>
	<body style="min-width:1280px; ">
		
		<header class="">
			<div class="w">
				<div class="head">
					<div class="back">
						<a href=""></a>
					</div>
					<div class="logo fl"><img src="images/oshine-logo-black.png" alt=""></div>
					<!-- 无序列表 -->
					<ul class="navigetion fl">
						<li class="fl"><a href="">Home</a></li>
						<li class="fl "><a href="">Pages</a>
							<!-- 二级导航 -->
							<ul class="subnav">
								<li><a href="">Shortcodes </a></li>
								<li><a href="">Typography</a></li>
								<li><a href="">Columns </a></li>
							</ul>
						</li>
						<li class="fl"><a href="">Portfolio</a>
						<li class="fl"><a href="">SINGLE PORTFOLIO</a>
							<!-- 二级导航 -->
							<ul class="subnav">
								<li><a href="">Pricing Plans</a></li>
								<li><a href="">Alerts</a></li>
								<li><a href="">Services </a></li>
							</ul>
						</li>
						<li class="fl"><a href="">Headers</a></li>
						<li class="fl"><a href="">Journal</a></li>
						<li class="fl"><a href="">SHOP</a></li>
						<li class="fl"><a href="">Shortcodes</a></li>
					</ul>
					<div class="navigetion_fonts fr">
						<span class="fa fa-search"></span>
						<span class="fa fa-bars"></span>
						<span class="fa fa-suitcase" style=""></span>
					</div>
				</div>

			</div>
			<div class="stylist">
				<h1>STYLISH</h1>
			</div>
		</header>
		<div class="main">
			<div class="w">
				<div class="we ">
					<h2>WE ARE OSHINE</h2>
					<p class="p1">A beautiful responsive multi-purpose wordpress theme</p>
					<div></div>
					<p class="p2">Oshine comes with 12 unique and stunning demos. We have crafted each and every demo <br>with
						extensive care and precision and the theme is power packed yet easy to use. </p>
					<img src="images/oshin-mockups-1024x377.png" alt="">
				</div>
				<div class="demos clearfix">
					<div class="demo">
						<span class="fa fa-bank"></span>
						<p>12 DEMOS</p>
					</div>
					<div class="demo">
						<span class="fa fa-bullseye"></span>
						<p>POWERFUL OPTIONS</p>
					</div>
					<div class="demo">
						<span class="fa fa-archive"></span>
						<p>PAGE BUILDER</p>
					</div>
					<div class="demo">
						<span class="fa fa-binoculars"></span>
						<p>UNLIMITED PORTFOLIO</p>
					</div>
				</div>
				<div class="phone clearfix">
					<div class="mode">
						<span class="fa fa-binoculars"></span>
						<h3>MODERN DESIGN</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.</p>
					</div>
					<div class="mode">
						<span class="fa fa-archive"></span>
						<h3>SUPER CUSTOMIZABLE
						</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.
						</p>
					</div>
					<div class="mode">
						<span class="fa fa-bullseye"></span>
						<h3>UNIQUE LAYOUT</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.
						</p>
					</div>
					<div class="mode">
						<span class="fa fa-bullseye"></span>
						<h3>AJAX TRANSITIONS</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.
						</p>
					</div>
					<div class="mode">
						<span class="fa fa-suitcase" style=""></span>
						<h3>WOO COMMERCE</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.</p>
					</div>
					<div class="mode">
						<span class="fa fa-bank"></span>
						<h3>40+ MODULES</h3>
						<p>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis
							sapien placerat tellus suscipit vehicula.</p>
					</div>
					
				</div>

			</div>
				<div class="book">
				</div>
			<div class="w">

				<div class="ourWork we">
					<h2>OUR WORK</h4>
						<p class="p1">A beautiful responsive multi-purpose wordpress theme</p>
						<div></div>
				</div>
				<div class="alls clearfix">
					<div class="all" style="color: #e17f40; border: 1px solid #e17f40;">All</div>
					<div class="all">Brochures</div>
					<div class="all">Mobile</div>
					<div class="all">Slider</div>
					<div class="all">Videos</div>
					<div class="all">Web</div>
				</div>
				<div class="imgs">
					<img src="images/road-product-650x385.jpg" alt="">
					<img src="images/s3-650x385.jpg" alt="">
					<img src="images/Vinyl-Record-PSD-full-650x385.jpg" alt="">
					<img src="images/poster-frame-650x385.jpg" alt="">
					<img src="images/wanderlust07-650x385.jpg" alt="">
					<img src="images/oshin-model-0011-650x385.jpg" alt="">
				</div>
				<div class="viewall">
					VIEW ALL WORK
				</div>
			</div>
			<div class="bird">
				<span class="fa fa-twitter" style="font-size: 90px;color: #dfdfdf;"></span>
				<p>
					RT @ <span style="color: red;"> InteractiveAU:</span>  Growth hacking is marketing that doesnt scale says
				</p>
				<p style="color: red">https://t.co/BrrwDbR2Pn</p>
				<p>@envato</p>
			</div>
			<div class="w">
				<div class="ourCLIENTS we">
					<h2>OUR CLIENTS</h4>
						<p class="p1">A beautiful responsive multi-purpose wordpress theme</p>
						<div></div>
				</div>
			</div>
			<div class="pup_imgs w clearfix">
				<img src="images/Marks_2048x1536_144dpi_12_1000.jpg" >
				<img src="images/Marks_2048x1536_144dpi_11_1000.jpg" >	
			</div>
			<div class="touch">
				<h2>GET IN TOUCH</h2>
				<p>Have an idea or a project, lets collaborate and build some awesome stuff</p>
				<div class="buy">BUY NOW</div>
			</div>
			<footer class="">
				<div class="w">
					<div class="foot">
						<div class="four">
							<img src="images/oshin-black-logo.png" >
							<p>Ea mei nostrum imperdiet deterruisset, 
							mei ludus efficiendi ei. Sea summo mazim ex,
							 ea errem eleifend </br>
							  definitionem vim. 
							 Detracto erroribus et mea.
							</p>
							<span class="fa fa-facebook"></span>
							<span class="fa fa-twitter"></span>
							<span class="fa fa-send"></span>
							<span class="fa fa-soccer-ball-o"></span>
						</div>
						<div class="four">
							<h4>Recent Posts</h4>
							<div class="ko">
								<p class="p_img">oshin-ipad-mock</p>
								<p>Oshine – a Creative Multipurpose WordPress theme</p>
								<p>October 10, 2014</p>
							</div>
							<div class="ko">
								<p class="p_img">responsive-road	</p>
								<p>If You Are Good At Something, Don’t Do It For Free</p>
								<p>October 10, 2014</p>
							</div>
						</div>
						<div class="four">
							<h4>Recent Posts</h4>
							<ul>
								<li>Home</li>
								<li>About Us</li>
								<li>Team</li>
								<li>Blog</li>
								<li>Contact</li>
							</ul>
						</div>
						<div class="four clearfix">
							<h4>From Instagram</h4>
							<img src="images/f1.jpg" alt="">
							<img src="images/f2.jpg" alt="">
							<img src="images/f3.jpg" alt="">
							<img src="images/f4.jpg" alt="">
							<img src="images/f5.jpg" alt="">
							<img src="images/f6.jpg" alt="">
							<img src="images/f7.jpg" alt="">
							<img src="images/f8.jpg" alt="">
							<img src="images/f8.jpg" alt="">
						</div>
					</div>
				</div>
				<div class="copyright">
					Copyright Brand Exponents 2014. All Rights Reserved
				</div>
			</footer>
		</div>
	</body>
</html>

爱小黄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
case 5

动画<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/
复制链接

扫一扫