<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画24-css3制作动态404页面

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,css3制作动态404页面!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-29

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      854次

                      源码,可以直接复制使用!

                      <!DOCTYPE html>
                      <html>
                      	<style>
                      		body{
                      			background:#89dfff;
                      			overflow: hidden;
                      		}
                      		.ground{
                      			position: absolute;
                      			left: 0;
                      			right: 0;
                      			bottom: 0;
                      			height: 30vh;
                      			background: #f2d4ae;
                      		}
                      		.cloud{
                      			position: absolute;
                      			top: 20%;
                      			left: 60%;
                      			height: 7vmin;
                      			width: 20vmin;
                      			border-radius: 20vmin;
                      			background: #fff;
                      			animation: c1 55s infinite linear;
                      		}
                      	    @keyframes c1 {
                      	0% {
                      		opacity: 1;
                      		transform: translateX(-80vw)
                      	}
                      	100% {
                      		opacity: 1;
                      		transform: translateX(100vw)
                      	}
                      }
                      		.cloud.cloudA{
                      			top: 25%;
                      			left: 30%;
                      			animation: c2 45s infinite ease;;
                      			transform: scale(0.7);
                      		}
                      		@keyframes c2 {
                      	0% {
                      		transform: translateX(-100vw) scale(0.7);
                      	}
                      	100% {
                      		transform: translateX(100vw) scale(0.7);
                      	}
                      }
                      		.cloud1{
                      			position: absolute;
                      			top: -5vmin;
                      			left: 7vmin;
                      			height: 10vmin;
                      			width: 10vmin;
                      			border-radius: 20vmin;
                      			background: #fff;
                      		}
                      		.cloud2{
                      			position: absolute;
                      			top: -3vmin;
                      			left: 3vmin;
                      			height: 7vmin;
                      			width: 7vmin;
                      			border-radius: 20vmin;
                      			background: #fff;
                      			
                      		}
                      		.sign{
                      			position: absolute;
                      			bottom: 20vh;
                      			left: 30vw;
                      			height: 20vmin;
                      			width: 20vmin;
                      		}
                      		.post{
                      			position: absolute;
                      			height: 18vmin;
                      			width: 1.5vmin;
                      			border: 0.2vmin solid #000;
                      			border-radius: 1vmin;
                      			background: #70624d;
                      			transform: rotate(-10deg);
                      		}
                      		.txt{
                      			position: absolute;
                      			bottom: 11vmin;
                      			left: -6.5vmin;
                      			height: 7vmin;
                      			width: 15vmin;
                      			border: 0.2vmin solid #2f3f39;
                      			background: #96ccb8;
                      			text-align: center;
                      			font-size: 3vmin;
                      			line-height: 7vmin;
                      			transform: rotate(-10deg) skewY(-10deg);
                      			font-family: 'Permanent Marker', sans-serif, cursive;
                      		}
                      		/***投影***/
                      		.pshadow{
                      			position: absolute;
                      			bottom: -2vmin;
                      			left: -3vmin;
                      			height: 11vmin;
                      			width: 1.5vmin;
                      			border-radius: 1vmin;
                      			background: #c1a88a;
                      			transform: rotate(-80deg);
                      		}
                      		.tshadow{
                      			position: absolute;
                      			bottom: 2.5vmin;
                      			left: -8vmin;
                      			height: 3vmin;
                      			width: 8vmin;
                      			background: #c1a88a;
                      			transform: rotate(-70deg) skewY(-10deg);
                      		}
                      	</style>
                      	<head>
                      		<meta charset="UTF-8">
                      		<title></title>
                      		<link  rel="stylesheet">
                      	</head>
                      	<body>
                      		 <div class="ground">	 	
                      		 </div>
                      		 <div class="cloud">
                      		 	<div class="cloud1"></div>
                      		 	<div class="cloud2"></div>
                      		 </div>
                      		 <div class="cloudA cloud">
                      		 	<div class="cloud1"></div>
                      		 	<div class="cloud2"></div>
                      		 </div>
                      		 <div class="sign">
                      		 	<div class="pshadow"></div>
                      		 	<div class="tshadow"></div>
                      		 	<div class="post"></div>
                      		 	<div class="txt">
                      		 		Silence...
                      		 	</div>
                      		 </div>
                      	</body>
                      </html>
                      
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/306.html 关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页