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>
    
  • 相关阅读:
    二、跳转指定页面的JS代码
    一、常规的JS页面跳转代码
    您在前一家公司的离职原因是什么?
    如果你在这次面试中没有被录用,你怎么打算?
    如果你在这次面试中没有被录用,你怎么打算?
    针对你们单位业务工作中出现的问题,你提出了一些很好的建议,得到了同事们的赞同,但你的领导并不满意。在这种情况下,你怎么办?
    进程与线程的区别
    work13
    work12
    day09
  • 原文地址:https://www.cnblogs.com/tonghaolang/p/7750980.html
Copyright © 2011-2022 走看看