【2018.01.25】制作一张会跳舞的白纸源码

分享 :

网盘下载链接:

提取密码: hn4i
复制提取密码
51RGB在线教育2018年1月25下午15点,万老师WEB前端开发直播体验课,用CSS3制作一张会跳舞的白纸源码!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-25

    适用平台

    All

    系统位数

    ALL

    文件格式

    exe

    文件语言

    英文

    文件授权

    免费

    下载次数

    66次

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

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>制作一张会跳舞的白纸 | 51RGB在线教育</title>
    	<style>
    		body{
    		background:#bbd149;
    		margin: 0;
    		height: 100vh;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	}
    		.box{
    		height: 50px;
    		width: 50px;
    		position: relative;
    	}
    		.box::before{
    		content: '';
    		height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%;
    		position: absolute;
    		top: 67px;
    		left: 0;
    		animation: shadow .5s linear infinite;
    	}
    		.box::after{
    			border-radius: 5px;
    			background: #fff;
    			animation: rotate .5s linear infinite;
    			content: '';
    			position: absolute;
    			left: 0;
    			top: 0;
    			width: 50px;
    			height: 50px;
    		}
    		@keyframes shadow {
    	                0%, 100% {transform: scaleX(1);}
    	                50% {transform: scaleX(1.2);}
    }
    		@keyframes rotate {
    	                0% {transform: translateY(0) rotate(0deg);}
    	                25% {transform: translateY(10px) rotate(22.5deg);}
    	                50% {transform: translateY(20px) scale(1.1, 0.9) rotate(45deg);
    		        border-bottom-right-radius: 50px;}
    	                75% {ransform: translateY(10px) rotate(67.5deg);}
    	                100% {transform: translateY(0) rotate(90deg);}
    }
    	</style>
    </head>
    
    <body>
    
    	<div class="box"></div>
    	<div style="position: absolute; top:800px;">源码下载:<a href="http://www.51rgb.cn/download/page-142.html">http://www.51rgb.cn/download/page-142.html</a></div>
    	
    </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:

    课程视频下载地址:

  • 相关下载