web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变？ 如何把图片从正方形变成圆形。
web\u524d\u7aef\u9f20\u6807\u653e\u5728div\u6807\u7b7e\u5236\u6210\u7684\u76d2\u5b50\u4e0a\u5982\u4f55\u5b9e\u73b0\u56fe\u7247\u4e00\u79d2\u5185\u7531\u6b63\u65b9\u5f62\u53d8\u4e3a\u5706\u5f62\u5728\u53d8\u539f\u672c\u4e0d\u662f\u5706\u5f62\u56fe\u7247\uff0c\u901a\u8fc7CSS\u6837\u5f0f\u5e03\u5c40\u5b9e\u73b0\u6210\u5706\u5f62\u56fe\u7247\uff0c\u9996\u5148\u56fe\u7247\u5fc5\u987b\u4e3a\u6b63\u65b9\u5f621\u3001HTML\u6e90\u4ee3\u7801\u5b8c\u6574\u4ee3\u7801\uff1a\u590d\u5236\u4ee3\u7801\u4ee3\u7801\u5982\u4e0b:\u56fe\u7247\u5706\u5f62\u5e03\u5c40 \u5728\u7ebf\u6f14\u793a DIVCSS5\u30022\u3001\u5bf9\u5e94CSS\u4ee3\u7801\uff1a\u590d\u5236\u4ee3\u7801\u4ee3\u7801\u5982\u4e0b:#divcss5{ margin:10px auto}\u3002#divcss5 img{ border-radius:50%}\u3002\u547d\u540d\u76d2\u5b50\u201cid=divcss5\u201d\u76d2\u5b50\u5c45\u4e2d\uff0c\u540c\u65f6\u4e0a\u4e0b\u5916\u95f4\u8ddd\u4e3a10px;\uff0c\u7136\u540e\u8bbe\u7f6e\u5bf9\u8c61\u76d2\u5b50\u91ccimg\u56fe\u7247\u5706\u89d250%\u3002
1\u3001\u5728ps\u4e2d\u6253\u5f00\u9700\u8981\u88c1\u526a\u6210\u5706\u5f62\u7684\u6b63\u65b9\u5f62\u56fe\u7247\u3002
2\u3001\u5728\u5de6\u4fa7\u5de5\u5177\u680f\u4e2d\u9009\u62e9\u201c\u692d\u5706\u9009\u6846\u5de5\u5177\u201d\u3002
3\u3001\u6309\u4f4fshift\u952e\u7684\u540c\u65f6\u62d6\u52a8\u9f20\u6807\u5de6\u952e\u5f62\u6210\u4e00\u4e2a\u5706\u5f62\u9009\u533a\u3002
4\u3001\u6309\u5feb\u6377\u952eCtrl+J\u952e\u590d\u5236\u51fa\u5706\u5f62\u9009\u533a\u3002
5\u3001\u5173\u95ed\u80cc\u666f\u56fe\u5c42\u4ee5\u540e\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u5706\u5f62\u56fe\u7247\u4e86\u3002
2、在图片样式绑定:hover事件，控制图片在鼠标悬停时变化
//定义动画
@-webkit-keyframes imgChange
{
0%{border-radius:0%;}
50%{border-radius:50%;}
100%{border-radius:0%;}
}
img:hover{
-webkit-animation-name:imgChange;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
}
绛旓細("div").hover(function(){$(this).css("background-color","red");},function(){$(this).css("background-color","blue");});璇存槑锛氬紩鐢╦Query锛榧犳爣绉诲埌鏃舵樉绀虹孩鑹诧紝绉诲嚭鏃舵樉绀鸿摑鑹诧紝鍏蜂綋棰滆壊浣犲彲浠ヨ嚜宸遍夋嫨銆
绛旓細鍒嗘瀽濡備笅锛氶鍏堜綘瑕佹妸浠ｇ爜鍐欏ソ锛岀櫨宸﹁竟鏄1绾х洰褰曞垪琛紝搴﹀彸杈规槸2绾х洰褰曞垪琛紝鐒跺悗2绾х洰褰曟渶澶х殑鐭div鐢╠isplay:none鍏堥殣钘忚捣鏉ワ紝閬撶敤hover銆傚綋榧犳爣缁忚繃1绾х洰褰曟椂锛岀粰2绾х洰褰曟渶鍥炲ぇ鐨刣iv娣诲姞display:block灞炴х瓟璁╁畠鏄剧ず鍑烘潵銆
绛旓細濡備笅绀轰緥锛宱nmousemove灏辨槸榧犳爣鎮诞div鐨勬椂鍊欓噰鐢╠1鏍峰紡锛屽綋榧犳爣绂诲紑灏变娇鐢╠2鏍峰紡锛宮argin-top灏辨槸涓庝笂闈㈢殑璺濈锛屾帶鍒惰繖涓窛绂诲氨鑳藉疄鐜癲iv鍚戜笂绉诲姩鐨勬晥鏋溿傜ず渚嬶細<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绀轰緥</title><style type="text/css">....
绛旓細1銆侀渶瑕佺粨鍚圝avaScript瀹炵幇锛岄鍏堟墦寮sublime text缂栬緫鍣紝鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ竴涓鏍囩鍜屽脊鍑哄眰div锛屽垎鍒缃畠浠殑榧犳爣绉诲叆鍜岀Щ鍑轰簨浠讹紱鏈鍚庣畝鍗曠殑璁剧疆涓や釜html鏍囩鐨勬牱寮忥紝璁╁脊鍑哄眰榛樿闅愯棌锛岃缃脊鍑哄眰鐨勫ぇ灏忚儗鏅瓑灞炴э細2銆佹帴鐫鍦ㄤ笅鏂圭殑script鏍囩璁剧疆涓や釜鍑芥暟锛屼竴涓槸榧犳爣绉诲叆鏃惰Е鍙戠敤鏉ユ樉绀篸iv锛屽彟...
绛旓細鍥犱负div鏄潡鏍囩锛岀嫭鑷崰涓琛岋紝濡傛灉甯屾湜鍦ㄥ皬鍧楃殑鍙宠竟锛屾湁濂藉绉嶈В鍐冲姙娉曪紝闅忔剰涓句笁绉嶏細澶у潡鍜屽皬鍧梔iv閮絛isplay:inline-block;澶у潡鍜屽皬鍧梔iv閮絝loal:left;澶у潡瀹氫綅鍒板皬鍧楃殑鍙宠竟銆俻osition锛歛bsolute锛
绛旓細榧犳爣缁忚繃寮瑰嚭娴姩妗嗙殑鏁堟灉锛屽疄鐜版柟娉曟湁澶氱锛岃繖閲屽垪涓2绉嶅父鐢ㄧ殑瑙ｅ喅鏂规硶銆備唬鐮佺洿鎺ヨ创涓婃潵涓嶈兘姝ｅ父鏄剧ず锛岀湅闄勪欢銆傛柟娉旳锛氭妸娴姩div鍜岃Е鍙戝厓绱燼鏀浜庡悓涓涓埗绾у厓绱犲唴锛岄紶鏍囩粡杩囩埗绾у厓绱犳椂瑙﹀彂鏄剧ず銆傝繖鏍烽紶鏍囩Щ鍔ㄥ埌div鏃朵粛鐒跺浜庤鐖剁骇鍏冪礌鍐咃紝鍒檇iv涓嶄細闅愯棌銆傛柟娉旴锛氶紶鏍囩粡杩嘺鏃跺脊鍑篸iv锛岄紶鏍囩寮a鏃惰缃...
绛旓細background-color:#a84}</style></head><body><div id=main> <div class=test>璇锋妸榧犳爣绉诲埌杩欓噷</div> <div class=test>璇锋妸榧犳爣绉诲埌杩欓噷</div> <div class=test>璇锋妸榧犳爣绉诲埌杩欓噷</div> <div class=test>璇锋妸榧犳爣绉诲埌杩欓噷</div> <div class=test>璇锋妸榧犳爣绉诲埌杩欓噷</...
绛旓細鐢╬s鍋氫袱寮犲浘鐗囷紝涓寮犳槸绾浘鐗囷紝鍙︿竴寮犳槸鍥剧墖涓婂甫瀛楃殑鍥剧墖锛岀劧鍚庡湪DW涓偣鎻掑叆鍥惧儚鈥斺斿浘鍍忓璞♀斺榧犳爣缁忚繃鍥惧儚灏辫兘鍋氬嚭杩欑鏁堟灉浜
绛旓細1銆佹柟娉曚竴锛屽埄鐢╤tml鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛div{ height:100px;width:100px;background-color:aqua;} <divtitle=\"鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹筡">鏂囧瓧鍐呭鏂囧瓧鍐呭</div> ...
绛旓細濡備笅鍙傝冿細1.椤甸潰澶嶅埗鏈変竴涓猧d涓篶2鐨div锛屼笅闈㈡湁涓涓瓙div锛屼笅闈㈡湁涓涓寜閽紝浜嬩欢鏄敤鏉ョ偣鍑100涓猘dddiv銆2.鍦╡vent鍑芥暟涓紝瀹氫箟涓涓唴瀹逛负degreediv瀛楃鐨勫瓧绗︿覆鍙橀噺銆3.鐒跺悗浣跨敤jquery鐨刟ppend灏嗗凡鐭ョ殑div瀛楃涓叉坊鍔犲埌c2div锛屽涓嬫墍绀恒4.杩愯椤甸潰锛岀幇鍦ㄥ彧鐪嬪埌涓涓猟iv锛屽涓嬪浘鎵绀恒5.鍗曞嚮涓嬮潰鐨...
