css如何讓一張圖片來回晃動_css3

⑴ css3如何讓圖片自動移動

自動移動，目前css3是有這樣的效果的，叫做css3動畫

給你一個示例

你要注意的一點是目前這個只能支持最低為IE10及以上版本才能夠運行的哦

Chrome 和 Safari 需要前綴 -webkit-。

本答案出自「我要編程」軟體開發師訓練平台免費課程。

<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst5s;
-moz-animation:myfirst5s;/*Firefox*/
-webkit-animation:myfirst5s;/*SafariandChrome*/
-o-animation:myfirst5s;/*Opera*/
}

@keyframesmyfirst
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-moz-keyframesmyfirst/*Firefox*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-webkit-keyframesmyfirst/*SafariandChrome*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}

@-o-keyframesmyfirst/*Opera*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
<body>

<p><b>注釋：</b>本例在InternetExplorer中無效。</p>

<div></div>

</body>
</html>

⑵ 怎麼用CSS代碼實現，好多圖片橫向的不間斷滾動

你好！CSS實現不了，配合JS才行
代碼如下：
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>

</script>

⑶ css+js可以讓圖片動起來嗎

可以的

js創建img，指定位置：

varimage=createElement("image");
image.src="位置";
image.id="img"

(1) 使用CSS介面：

interfaceCSS
{
#img{zoom:2}
}
setTimeout(function(){
interfaceCSS
{
#img{zoom:1}
}}(),5)

(2) 屬性操作：

$('img').zoom=2;
setTimeout(function(){$('img').zoom=1}(),5);

可知js即可讓圖片動起來（剛才的實例為放大縮小）

⑷ css3 如何讓一個圖片不斷翻轉

/*css3讓一個圖片不斷翻轉示例代碼*/
#gavinPlay{
	/*background:colorurlxyrepeat圖片來自網路圖片，按需要更換*/
	background:rerl("https://ss1..com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80")centerno-repeat;
	/*background-size:autoauto||cover代表以寬或高填滿元素背景*/
	background-size:cover;
	/*隨便設置寬高值，測試*/
	width:200px;
	height:200px;
	/*設置默認樣式，開啟3d硬體加速*/
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	/*設置動畫，animation:動畫名稱動畫播放時長單位秒或微秒動畫播放的速度曲線linear為勻速動畫播放次數infinite為循環播放;*/
	-webkit-animation:play3slinearinfinite;
	-moz-animation:play3slinearinfinite;
	animation:play3slinearinfinite;
}
@-webkit-keyframesplay{
	0%{
		/*
		水平翻轉
		*/
		-webkit-transform:rotateY(0deg);
		/*
		垂直翻轉
		-webkit-transform:rotateX(0deg);
		順時針旋轉
		-webkit-transform:rotate(0deg);
		逆時針旋轉
		-webkit-transform:rotate(0deg);
		*/
	}
	100%{
		/*水平翻轉*/
		-webkit-transform:rotateY(360deg);
		/*垂直翻轉
		-webkit-transform:rotateX(360deg);
		順時針旋轉
		-webkit-transform:rotate(360deg);
		逆時針旋轉
		-webkit-transform:rotate(-360deg);
		*/
	}
}
@-moz-keyframesplay{
	0%{
		-moz-transform:rotateY(0deg);
		/*
		-moz-transform:rotateX(0deg);
		-moz-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		*/
	}
	100%{
		-moz-transform:rotateY(360deg);
		/*
		-moz-transform:rotateX(360deg);
		-moz-transform:rotate(360deg);
		-moz-transform:rotate(-360deg);
		*/
	}
}
@keyframesplay{
	0%{
		transform:rotateY(0deg);
		/*
		transform:rotateX(0deg);
		transform:rotate(0deg);
		transform:rotate(0deg);
		*/
	}
	100%{
		transform:rotateY(360deg);
		/*
		transform:rotateX(360deg);
		transform:rotate(360deg);
		transform:rotate(-360deg);
		*/
	}
}

<!--html布局代碼-->
<divid="gavinPlay"></div>

⑸ 如何在html中怎麼讓圖片浮動

1、使用css中的flaot屬性就可以了，首先打開Dreamweaver，創建html文件：

⑹ css有什麼方法讓背景圖像輪播一樣不停的動最好不用定時器

使用css3+js就能實現，css3的animation屬性實現時間間隔的輪播效果，js負責計算每下一個元素出現的時間，來實現循環

⑺ css3,怎麼讓圖片自動動起來

實例
使用簡寫屬性，將動畫與div元素綁定：
div
{
animation:mymove5sinfinite;
-webkit-animation:mymove5sinfinite;/*Safari和Chrome*/
}

定義和用法
animation屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation-name
animation-ration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注釋：請始終規定animation-ration屬性，否則時長為0，就不會播放動畫了。
默認值：none0ease01normal
繼承性：no
版本：CSS3
JavaScript語法：object.style.animation="mymove5sinfinite"

⑻ 如何在css中把一組靜態圖片改成動態滾動的圖片

連續的滾動可以使用css3實現（animat,0%,50%,100%），設置不同時間的圖片位置即可。但只是在「滾動」，通常不是大家所稱之為的「滾動」（嚴格說是滑動）。
因此說，你的問題有一定的歧義的。

css3還有一種方法可以實現滾動。就是使用過度效果（transition），他也可以實現滾動的效果。而且，個人感覺比較符合你的意思。

其具體的做法是，給超鏈接滑過狀態一個圖片屬性，如：
li a img {margin-top:0px;}
li a:hover img {margin-top:-20px;}
li a img {-webkit-transition: margin-top 0.5s;}/*注意這里的hack，照顧多個瀏覽器*/
這樣，滑鼠滑上圖片，圖片就會動畫向上滑動20像素，滑鼠離開，又滑下來。

再扯下嚴格意義的【動態滾動的圖片】，一般的解釋是一組圖片可以在某個區域內動畫滑動。注意是一組。css通常不具有處理多組圖片（也有css模擬動畫幀的效果的）的效果。動態滾動圖片常見的有2種，一種是可控制的滾動列表，一種是自動無限循環滾動。通常用來作為滾動新聞、組圖或相冊（風采）使用。

⑼ 怎樣用CSS實現圖片翻轉

以實現一張圖片雙面翻轉為例：

方法一：

1、實現CSS樣式的方法代碼如下。

⑽ css中怎樣讓內容或圖片滾動

讓圖片和文字滾動以前是用<marquee></marquee>標簽，不過現在已經很少人使用這個標簽了，因為局限性太大！

現在一般都採用JS的方式或jquery具體的看你的具體需求才能使用相應的代碼。

導航:首頁 > 圖片大全 > css如何讓一張圖片來回晃動

css如何讓一張圖片來回晃動

與css如何讓一張圖片來回晃動相關的資料