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 href="https://fonts.googleapis.com/css?family=Permanent+Marker" 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.51rgb.cn/video/page-29/306.html 关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载
在线客服
热线电话

微信公众账号