zoukankan      html  css  js  c++  java
  • 旋转的播放按钮

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.video_btn_container{
    			height: 100px;
    			 100px;
    			position: relative;
    			border-radius: 50%;
    			background-color: rgb(255, 255, 255,.8);
    		}
    		.btn_border{
    			height: 100px;
    			 100px;
    			background: url('http://note.youdao.com/yws/public/resource/a5dec28b4c472b42d7126f3a389e3f28/xmlnote/531FC34716824BE5A6ABD0451F9FDBF0/WEBRESOURCEdd5881c009e6d8d9b5c7d166f93d5f53/7216') no-repeat;
    			background-size: 100% 100%;
    			
    			transition: my_border 2s linear infinite;
    			-webkit-animation:my_border 2s linear infinite;
    		}
    		.btn_core{
    			height: 30px;
    			 30px;
    			background: url('http://note.youdao.com/yws/public/resource/a5dec28b4c472b42d7126f3a389e3f28/xmlnote/531FC34716824BE5A6ABD0451F9FDBF0/WEBRESOURCEcf4dc195da4c948fecffeee63708e2eb/7218') no-repeat;
    			background-size: 100% 100%;
    			background-position: center center;
    			position: absolute;
    			top: 0;left: 0;right: 0;bottom: 0;
    			margin: auto;
    			transition: my_core 2s linear infinite;
    			-webkit-animation:my_core 2s linear infinite;
    		}
    		@keyframes my_border{
    			0%{transform: rotate(0deg);}
    			25%{transform: rotate(90deg);}
    			50%{transform: rotate(180deg);}
    			75%{transform: rotate(270deg);}
    			100%{transform: rotate(360deg);}
    		}
    		@-webkit-keyframes my_border{
    			0%{transform: rotate(0deg);}
    			25%{transform: rotate(90deg);}
    			50%{transform: rotate(180deg);}
    			75%{transform: rotate(270deg);}
    			100%{transform: rotate(360deg);}
    		}
    		@keyframes my_core{
    			0%{transform: scale(.9,.9);}
    			25%{transform: scale(1,1);}
    			50%{transform: scale(1.1,1.1);}
    			75%{transform: scale(1,1);}
    			100%{transform: scale(0.9,.9);}
    		}
    		@-webkit-keyframes my_core{
    			0%{transform: scale(.9,.9);}
    			25%{transform: scale(1,1);}
    			50%{transform: scale(1.1,1.1);}
    			75%{transform: scale(1,1);}
    			100%{transform: scale(0.9,.9);}
    		}
    	</style>
    </head>
    <body>
    	<div class="video_btn_container">
    		<div class="btn_border"></div>
    		<div class="btn_core"></div>
    	</div>
    </body>
    </html>
    
  • 相关阅读:
    18款在线代码片段测试工具
    毫秒必争,前端网页性能最佳实践
    如何判断Javascript对象是否存在
    推荐10款免费的在线UI测试工具
    揭开Socket编程的面纱
    使用 jQuery Ajax 在页面滚动时从服务器加载数据
    对Android开发者有益的40条优化建议
    web api+递归树型结构
    asp.net Lodop实现批量打印
    asp.net lodop单个打印
  • 原文地址:https://www.cnblogs.com/tonghaolang/p/7750980.html
Copyright © 2011-2022 走看看