标签:back -o png capture 代码 head ansi tran lan
下面一段代码是,h5的画圆,半圆,四分之一圆等效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 300px; border: 1px solid red; border-radius: 150px; background:url("image/Capture001.png") 0px 0px no-repeat; background-size: cover ; transition: 0.1s; box-shadow: 10px 10px 10px red; } div:hover{ transform: rotate(360deg)scale(1); -webkit-transition:0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; -o-transition: 0.1s; transition:all 0.1s linear ; } @-webkit-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } #a{ width: 300px; height: 150px; border: 1px solid red; border-radius: 150px 150px 0px 0px; } #b{ width: 300px; height: 150px; border: 1px solid red; border-radius: 0px 0px 150px 150px; } #c{ width: 150px; height: 150px; border: 1px solid red; border-radius: 150px 0px 0px 0px; } #d{ width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 150px 0px 0px; } #e{ width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 0px 150px 0px; } #f{ width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 0px 0px 150px; } #g{ width: 150px; height: 300px; border: 1px solid red; border-radius: 150px 0px 0px 150px; } #h{ width: 150px; height: 300px; border: 1px solid red; border-radius: 0px 150px 150px 0px; } </style> </head> <body> <center> <div></div> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> </center> </body> </html>
标签:back -o png capture 代码 head ansi tran lan
原文地址:http://www.cnblogs.com/wangbenqing/p/7025774.html