登录
搜索
搜索
首页 小白人生 CSS 正文

纯CSS动画制作，6种网页效果

柏平 7年前 (2017-07-16) 4458℃ 1次吐槽

闲着无聊，捣鼓了一下css3的动画效果，代码写的不怎么样，想要的效果还是实现了（建议使用谷歌浏览器浏览效果），就这样，欢迎大神们指出不足的地方，以下附上代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无聊-柏平博客原创</title>
</head>
<style>
* {
	margin:0;
	padding:0;
}
.main{
width:1300px;
height:200px;
float:left;
margin-bottom:20px;}
.img {
	display: block;
	position: relative;
}
body {
	padding:30px;
}
.transform {
	width:150px;
	height:200px;
	background:#ccc;
	float:left;
	z-index:9999;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition:1s;
}
.tsf {
	width:150px;
	height:200px;
	background:#fff;
	opacity:0;
	color:#000;
	top:-204px;
	display:block;
	position:relative;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition:1s;
	visibility:hidden;
}
.transform:hover {
	opacity:.5;
	box-shadow:0px 0px 10px 0px;
}
.transform:hover .tsf {
	transform:translate(5px, 5px);
	opacity:.8;
	box-shadow:0px 0px 9px 1px;
	visibility:visible;
}
/*以上是transform的css*/
.transform2 {
	width:150px;
	height:200px;
	float:left;
	background:#CCC;
	margin-left:30px;
	z-index:9999;
	overflow:hidden;
}
.transform2 img {
	width:150px;
	height:200px;
	background:#fff;
	z-index:555;
	opacity:1;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.tsf2 {
	width:150px;
	height:200px;
	position: relative;
	left:-151px;
	top:-203px;
	background:#fff;
	line-height:160px;
	opacity:.6;
	z-index:9999;
	display:block;
	visibility:hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.transform2:hover {
	opacity:.3;
	box-shadow:0px 0px 9px 0px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition:1s;
}
.transform2:hover img {
	transform:translatex(150px);
	opacity:.6;
	box-shadow:0px 0px 6px 1px;
}
.transform2:hover .tsf2 {
	transform:translatex(151px);
	opacity:.6;
	visibility:visible;
	box-shadow:0px 0px 6px 1px;
}
.tsf2 p {
	position:relative;
	font-size:20px;
	color:#333;
	height:20px;
	opacity:0.7;
	text-decoration:none;
	text-align:center;
	-webkit-transform: translateY(-120px);
	-moz-transform: translateY(-120px);
	-o-transform: translateY(-120px);
	-ms-transform: translateY(-120px);
	transform: translateY(-120px);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.tsf2 a.info {
	font-size:20px;
	color:#333;
	display:block;
	height:20px;
	opacity:0.7;
	position:relative;
	text-decoration:none;
	text-align:center;
	-webkit-transform: translateY(-120px);
	-moz-transform: translateY(-120px);
	-o-transform: translateY(-120px);
	-ms-transform: translateY(-120px);
	transform: translateY(-120px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.transform2:hover p, .transform2:hover a.info {
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-ms-transition-delay: 0.7s;
	transition-delay: 0.7s;
}
/*以上是transform的css*/
.view {
	width:150px;
	height:200px;
}

.box {
	background:#CCC;
	margin-left:30px;
	float:left;
	opacity:1;
	overflow: hidden;
}
.viewover {
	width:150px;
	height:200px;
	background:#066;
	opacity:1;
	position:relative;
	transform:width 1s height 1s;
	-webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
}
.viewover2 {
	width:150px;
	height:200px;
	position:relative;
	top:-200px;
	background:#fff;
	line-height:190px;
	opacity:0;
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-o-transform: translateY(200px);
	-ms-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;/* Safari and Chrome */
}
.viewover2 p {
	position:relative;
	font-size:20px;
	color:#333;
	height:20px;
	opacity:0;
	text-decoration:none;
	text-align:center;
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-o-transform: translateY(200px);
	-ms-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.box:hover p {
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}
.box:hover {
	opacity:.3;
	box-shadow:0px 0px 9px 0px;
}
.box:hover .viewover {
	-webkit-transform: rotate(720deg) scale(0);
	-moz-transform: rotate(720deg) scale(0);
	-o-transform: rotate(720deg) scale(0);
	-ms-transform: rotate(720deg) scale(0);
	transform: rotate(720deg) scale(0);
}
.box:hover .viewover2 {
	opacity:1;
	box-shadow:0px 0px 6px 1px;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
.top-bottom {
	width:210px;
	height:150px;
	background:#06F;
	margin-left:30px;
	overflow:hidden;
	float:left;
	border: 1px solid rgb(255, 255, 255);
}
.top-bottom img {
	opacity:1;
	-moz-transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
	-o-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	transform:scale(1, 1);
	-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;
}
.top-bottom2 {
	width:150px;
	height:150px;
	position:relative;
	background:#333;
	margin:auto;
	/*top:-181px;*/
	top:-335px;
	opacity:0.4;
	color:#FFF;
	text-align:center;
	line-height:260px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.top-bottom p {
	transform:rotate(-45deg);
	margin-left:86px;
	display: inline-block;
}
.top-bottom:hover {
	opacity:1;
	box-shadow: 0px 0px 9px rgb(170, 170, 170);
}
.top-bottom:hover img {
	opacity:1;
	-moz-transform:scale(2, 2);
	-webkit-transform:scale(2, 2);
	-o-transform:scale(2, 2);
	-ms-transform:scale(2, 2);
	transform:scale(2, 2);
}
.top-bottom:hover .top-bottom2 {
	opacity:.6;
	-webkt-transform:translateY(106px) rotate(45deg);
	-ms-transform:translateY(106px) rotate(45deg);
	-moz-transform:translateY(106px) rotate(45deg);
	-o-transform:translateY(106px) rotate(45deg);
	transform:translateY(106px) rotate(45deg);
}
.scale {
	float:left;
	width: 210px;
	height: 150px;
	background:#03F;
	border: 1px solid rgb(255, 255, 255);
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	margin-left:30px;
}
.scale2 {
	width:210px;
	height:150px;
	background:#333;
	position: absolute;
	top: 0px;
	left: 0px;
	color:#FFF;
	opacity:0;
	line-height:60px;
	border:0px solid rgba(0, 0, 0, 0.7);
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.scale:hover {
	opacity:1;
	box-shadow: 0px 0px 9px rgb(170, 170, 170);
}
.scale2:hover {
	opacity: .6;
	border:45px solid rgba(0, 0, 0, 0.7);
}
.frith {
	width:210px;
	height:150px;
	background:#fff;
	position: relative;
	border:1px solid #999;
	opacity:1;
	float:left;
	margin-left:30px;
	overflow:hidden;
}
.frithimg {
	width:210px;
	height:150px;
	background:#3C9;
	position:relative;
	opacity:1;
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}
.frith1 {
	width:210px;
	height:150px;
	background:#CCC;
	background-image: url(http://osxk5wypw.bkt.clouddn.com/2017/07/201707165234_8635.jpg);
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	color:#FFF;
	font-size:30px;
	line-height:150px;
	text-align:center;
	top:0px;
	left:0px;
	opacity:0;
	-webkit-transform:scale(0) rotate(-180deg);
	-moz-transform:scale(0) rotate(-180deg);
	-ms-transform:scale(0) rotate(-180deg);
	-o-transform:scale(0) rotate(-180deg);
	transform:scale(0) rotate(-180deg);
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
    transition:all .4s ease-in;
}
.frith:hover .frithimg {
	opacity:1;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transform:scale(0);
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}
.frith:hover .frith1 {
	opacity:1;
	-webkit-transform:scale(1) rotate(0deg);
	-ms-transform:scale(1) rotate(0deg);
	-moz-transform:scale(1) rotate(0deg);
	-o-transform:scale(1) rotate(0deg);
	transform:scale(1) rotate(0deg);
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
</style>
<body>
<div class="main">
<div class="transform"> <img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707163913_117.jpg" width="150px" height="200px"/>
  <div class="tsf">点我啊，你点不着，怎么滴</div>
</div>
<div class="transform2"> <img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707161394_9492.jpg"/>
  <div class="tsf2">
    <p>梦，被时间遗忘</p>
    <a href="#" class="info">你懂我的感受么</a> </div>
</div>
<div class="view box">
  <div class="viewover"> <img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707168627_4384.jpg" width="150px" height="200px"/></div>
  <div class="viewover2">
    <p>无聊制作</p>
  </div>
</div>
<div class="top-bottom"> <img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707163052_7374.jpg"width="210px" height="150px"/>
  <div class="top-bottom2">
    <p>你是傻逼</p>
  </div>
</div>
<div class="scale"> <img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707165234_8635.jpg" width="210px" height="150px"/>
  <div class="scale2">看我，来看我啊</div>
</div>
  <div class="frith">
    <div class="frithimg"><img src="http://osxk5wypw.bkt.clouddn.com/2017/07/201707163052_7374.jpg"width="210px" height="150px"/></div>
    <div class="frith1">你喜欢我么？</div>
  </div>
</div>
</body>
</html>


选择赏赐方式：

×

多少都是心意，感谢大家

选择分享方式：

×

扫一扫分享到微信朋友圈

标签： CSS3动画

本文标题：纯CSS动画制作，6种网页效果

本文地址：https://www.zbpnice.cn/post/108.html

温馨提示：文章内容系作者个人观点，不代表柏平博客对观点赞同或支持。

版权声明： 本文为原创文章，创建于7年前 (2017-07-16)，版权归 柏平 所有，欢迎分享本文，转载请保留出处！

相关推荐

评论列表 :共有1人吐槽, 4458人围观

iMJMJ
iMJMJ  3年前 (2021-09-17)  沙发回复
网站很棒！~~~~

发表评论:

备案号：湘ICP备17009941号-1
Theme zbpLucky by 柏平博客 基于Z-BlogPHP