51rgb-css3动画25-一张会跳舞的纸

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,css3制作一张会跳舞的纸!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-29

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    452次

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

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</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>
    </body>
    </html>
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:http://www.51rgb.cn/video/page-29/307.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

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

微信公众账号