我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续 分析一下CSS怎样实现该动画功能（鼠标放在图片上，图片向左移...
\u5982\u4f55\u7528CSS\u5b9e\u73b0\u9f20\u6807\u79fb\u52a8\u5230\u67d0\u5f20\u56fe\u7247\u65f6\u53d8\u6210\u53e6\u4e00\u5f20\u56fe\u7247.test{display:block;width:100px;height:100px;background:url(xxx.jpg)}.test:hover{background:url(yyy.jpg)}\u4e5f\u53ef\u4ee5\u8fd9\u6837\u505a\uff1a
a\u5bb9\u5668\uff0c\uff0c\uff0cb\u56fe\u7247\u4e00\uff0c\uff0c\uff0cc\u56fe\u7247\u4e8c\uff0c\uff0cbc\u90fd\u5b9a\u4f4d\u5728A\u91cc
a\u5bb9\u5668 c\u56fe\u7247\u4e8c{display:none\uff1b}
a\u5bb9\u5668:hover B\u56fe\u7247\u4e00{display:none\uff1b}
a\u5bb9\u5668:hover c\u56fe\u7247\u4e8c{display:block\uff1b}
\u8fd8\u6709\u5f88\u591a\u5f88\u591a\u65b9\u6cd5\uff0c\uff0c\uff0c
\u4e0d\u8fc7\u5efa\u8bae\u76f4\u63a5\u7528JS\u6765\u5b9e\u73b0\u5427\uff0c\uff0c\u7f51\u4e0a\u73b0\u6210\u4ee3\u7801\u5f88\u591a\u3002\u3002\u3002
.hc_hot ul li:hover {
margin-left: -10px;
}
\u9f20\u6807\u79fb\u4e0a.hc_hot ul li\u5bf9\u5e94\u7684\u5143\u7d20\u540e\uff0c\u89e6\u53d1hover\u72b6\u6001\uff0c\u5e94\u7528\u4e0a\u9762\u8fd9\u6761css\uff0c\u5de6\u8fb9\u8ddd\u53d8\u4e3a-10px\uff0c\u8fbe\u5230\u5411\u5de6\u79fb\u52a8\u7684\u76ee\u7684
有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused;，继续动画是animation-play-state:running; （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>动画暂停</title>
<style type="text/css">
@keyframes move
{
from {
transform: rotate(0deg);
left: 0;
}
to {
transform: rotate(360deg);
left: 600px;
}
}
@-webkit-keyframes move
{
from {
-webkit-transform: rotate(0deg);
left: 0;
}
to {
-webkit-transform: rotate(360deg);
left: 600px;
}
}
@-zos-keyframes move
{
from {
-zos-transform: rotate(0deg);
left: 0;
}
to {
-zos-transform: rotate(360deg);
left: 600px;
}
}
@-o-keyframes move
{
from {
-o-transform: rotate(0deg);
left: 0;
}
to {
-o-transform: rotate(360deg);
left: 600px;
}
}
.box {
animation: move 3s alternate infinite;
-webkit-animation: move 3s alternate infinite; /* Safari 和 Chrome */
-moz-animation: move 3s alternate infinite; /* Firefox */
-o-animation: move 3s alternate infinite; /* Opera */
position: absolute;
background-color: yellow;
width: 100px;
height: 100px;
}
.box:hover {
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这里有认识CSS是什么的人就不错了
你还要指望有精通的？
真是醉了
绛旓細鏈夊姩鐢绘晥鏋滅殑鏄css3鐨則ransition銆丂keyframes銆乤nimation绛夛紝css瑕侀紶鏍囩Щ涓婂幓鍚庢敼鍙樼姸鎬佸彧鑳界敤:hover浼被锛屾殏鍋滃姩鐢诲彲浠ョ敤璁剧疆animation-play-state:paused;锛岀户缁姩鐢绘槸animation-play-state:running; 锛堝彲鑳介渶瑕佽缃坊鍔-webkit-绛夌鏈夊墠缂锛夊叾瀹炲姩鐢昏繕鏄帹鑽恓q锛屽疄鐜拌捣鏉ヨ繕鏄尯鏂逛究鐨勶紝鑰屼笖涓嶇敤鎷呭績娴忚鍣ㄥ吋瀹规...
绛旓細瀹氫箟鍥剧墖涓虹粷瀵瑰竷灞锛屽湪body瀹介珮鑼冨洿鍐呬娇鐢ㄥ嚱鏁拌浠栧搴﹀拰楂樺害鎸佺画澧炲姞銆傚湪璋冪敤setInterval("鍑芥暟"锛屾瘡闅斿灏戠鎵ц)锛涙悶瀹
绛旓細鎶婃渶鍚庝竴琛岀殑bottom:-338px鏀规垚left:-237px;璇曡瘯
绛旓細棣栧厛浣犺鐭ラ亾瑕佹埅鍙栫殑鍥剧墖鍦ㄦ暣寮犲浘鐗囦腑鐨勫亸绉婚噺浠ュ強澶у皬銆傜劧鍚庯細 鍏朵腑www鏄鎴彇鐨勫皬鍥剧墖鐨勫搴︼紝hhh鍒欐槸楂樺害锛沴ll鏄皬鍥剧墖鐨勫乏杈瑰湪澶у浘鐗囩殑鍋忕Щ閲忥紝ttt鍒欐槸涓婅竟鐨勫亸绉婚噺銆傝娉ㄦ剰璐熷彿涓嶈兘鐪佺暐锛
绛旓細CSS 娴姩 娴姩鐨勬鍙互鍚戝乏鎴栧悜鍙绉诲姩锛岀洿鍒板畠鐨勫杈圭紭纰板埌鍖呭惈妗嗘垨鍙︿竴涓诞鍔ㄦ鐨勮竟妗嗕负姝傜敱浜庢诞鍔ㄦ涓嶅湪鏂囨。鐨勬櫘閫氭祦涓紝鎵浠ユ枃妗ｇ殑鏅氭祦涓殑鍧楁琛ㄧ幇寰楀氨鍍忔诞鍔ㄦ涓嶅瓨鍦ㄤ竴鏍枫侰SS 娴姩 璇风湅涓嬪浘锛屽綋鎶婃 1 鍚戝彸娴姩鏃讹紝瀹冭劚绂绘枃妗ｆ祦骞朵笖鍚戝彸绉诲姩锛岀洿鍒板畠鐨鍙宠竟缂樼鍒板寘鍚鐨勫彸杈圭紭锛氬啀璇风湅...
绛旓細1銆佷娇鐢ㄤ簡CSS3杩囨浮锛坱ransition锛夊睘鎬э細鍦–SS3涓紝鍙互浣跨敤transition灞炴ф潵瀹炵幇鍏冪礌鐨勮繃娓℃晥鏋滐紝濡傞鑹层佸ぇ灏忋佷綅缃侀忔槑搴︾瓑灞炴х殑鍙樺寲銆傚鏋滅粰鍥剧墖涓嬮潰鐨勮竟妗嗘坊鍔犱簡transition灞炴э紝骞惰缃簡杈规鐨勫搴︼紙width锛夋垨鑰呰竟妗嗛鑹诧紙border-color锛夊彂鐢熷彉鍖栨椂瑙﹀彂杩囨浮鏁堟灉锛岄偅涔堢偣鍑诲浘鐗囨椂杈规灏变細浠庡乏鍒板彸鎱㈡參鍑虹幇銆
绛旓細娌℃湁浠ｇ爜閭ｅ氨鍙鎬濊矾锛屼袱涓濊矾鍚э細鍒╃敤缁濆瀹氫綅鎶婂鍙锋斁鍦ㄦ鐨勫彸涓嬨傜敤鑳屾櫙鍥剧墖鍐欐硶锛屾妸瀵瑰彿褰撳仛妗嗙殑鑳屾櫙鍥俱侾S锛氭瘮杈冩帹鑽愯儗鏅浘鐗囧啓娉曪紝鐐瑰嚮浜嬩欢鏇村ソ鎺у埗銆傛湜閲囩撼
绛旓細涔熷彲浠ユ槸璐熸暟銆俠ackground-position: left -29px; 鏄儗鏅綅绉伙紝background-position鍚庨潰鏈変袱涓睘鎬э紝绗竴涓槸姘村钩浣嶇疆锛岀浜屼釜鏄瀭鐩存柟鍚戠殑浣嶇疆锛岃繖閲岄渶娉ㄦ剰鐨勬槸涓や釜灞炴х殑椤哄簭 姣斿锛歜ackground-position: left -29px;(褰撲腑鐨刲eft鎸浠庡浘鐗鐨勬渶宸︾璇昏捣锛-29px灏辨槸灏嗗浘鐗囧悜涓绉诲姩29px,鐒跺悗寮濮嬭)...
绛旓細1銆佽繖閲岀殑hspace鎸囨按骞虫柟鍚戜笌鍏朵粬鍏冪礌鐨勯棿闅旓紝濉釜浣犳兂瑕佺殑鏁存暟灏辫浜嗭紝濡傛灉鏄珫鐩存柟鍚戝氨鐢╲space锛岀畝鍗曞惂銆2銆佸湪鍥剧墖浠ｇ爜閲岄潰鍔犱笂margin灞炴с傚線鍙崇Щ灏眒argin-left锛屽線宸︾Щ鍔灏眒argin-right銆3銆佺粰鍥剧墖鍔犱釜class鐢ㄧ浉瀵瑰畾浣嶅仛灏卞彲浠ヤ簡銆備緥:.imgPlace{ position:relative; top:5px;left:5px;/*right:5...
绛旓細imgList li{ width:100px; height:100px; float:left;} /* 鍗曞紶鍥剧墖鐨勬墍鍦ㄤ綅缃殑澶у皬锛屽搴﹀氨鏄浘鐗囧搴﹀姞宸﹀彸杈硅窛 */ imgList img{ width:90px; height:90px; margin:5px;} /* 鍗曞紶鍥剧墖鐨勫昂瀵革紝鍙婂杈硅窛 */ function move(to){ var imgList = document.getElementById("imgList");...
