【问题标题】:Save html code result as .gif or other video将 html 代码结果保存为 .gif 或其他视频
【发布时间】:2015-06-02 22:26:06
【问题描述】:

所以这听起来可能有点奇怪,但这里是: 我有一些 HTML 代码。在 HTML 中,我使用 CSS 旋转图像。所以我想以某种方式将此旋转图像保存为 .gif 或其他视频。这可能吗?

代码:

    <style>
    @-webkit-keyframes spin {
    		  from {
    			-webkit-transform: rotate(0deg);
    		  }
    		  to {
    			-webkit-transform: rotate(360deg);
    		  }
    		}
    		
    		@-moz-keyframes spin {
    		  from {
    			-moz-transform: rotate(0deg);
    		  }
    		  to {
    			-moz-transform: rotate(360deg);
    		  }
    		}
    		
    		#loading {

    height:300px;
    width:300px;
    	border-radius: 150px;
    	-webkit-border-radius: 150px;
    	-moz-border-radius: 150px;
    	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

    		  animation-name: spin;
    		  animation-iteration-count: infinite;
    		  animation-timing-function: linear;
    		  animation-duration: 26s;
    		  animation-play-state: running;
    		  
    		  -webkit-animation-name: spin;
    		  -webkit-animation-iteration-count: infinite;
    		  -webkit-animation-timing-function: linear;
    		  -webkit-animation-duration: 26s;
    		  -webkit-animation-play-state: running;
    		  
    		  -moz-animation-name: spin;
    		  -moz-animation-iteration-count: infinite;
    		  -moz-animation-timing-function: linear;
    		  -moz-animation-duration: 26s;
    		  -moz-animation-play-state: running;
    		}
    </style>
    <center>
    <img src="http://hd.wallpaperswide.com/thumbs/fire_fist_vs_water_fist-t2.jpg" id="loading">
    </center>

     

任何帮助表示赞赏!

【问题讨论】:

    标签: javascript html css rotation spinning


    【解决方案1】:

    除了获取屏幕录制软件(例如 Camtasia)、录制、剪切并使用在线转换器将其转换为 gif 之外,我没有看到任何其他方式。

    【讨论】:

      【解决方案2】:

      也许其中一个答案会对您有所帮助。 (或者可能不是哈哈)

      Generate animated GIF with HTML5 canvas

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-04-25
        • 1970-01-01
        • 2020-04-18
        • 1970-01-01
        • 2019-10-22
        • 1970-01-01
        • 2020-03-17
        相关资源
        最近更新 更多