Heim  >  Artikel  >  Web-Frontend  >  Chrome立体动画代码_html/css_WEB-ITnose

Chrome立体动画代码_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:24:571130Durchsuche

效果预览:http://hovertree.com/code/run/css/x8l6si70.html

请实用Chrome浏览器查看效果,手机上也可以.

代码如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>CSS3正方形翻转动画 - 何问起</title>    <meta charset="utf-8" />    <style>.hewenqicube--ani {    -webkit-animation: rot 4s linear infinite;  }  @-webkit-keyframes rot {    to {  -webkit-transform: rotateY(-330deg) rotateX(370deg); }  } .hewenqicube{border:darkgreen solid 2px;width:200px;height:200px;background-color:silver;}#hovertreecom{width:400px;margin:10px auto;}    </style></head><body>    <div id="hovertreecom">        <h2>CSS3正方形翻转动画 by 何问起</h2>        <div class='hewenqicube hewenqicube--ani'>            正方形翻转动画,请使用Chrome浏览器 。 http://hovertree.com            <a href="http://hovertree.com">何问起</a>        </div>    </div></body></html>

转自:http://hovertree.com/code/css/x8l6si70.htm

更多特效:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn