『壹』 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>
『貳』 無限循環的圖片是怎麼做出來的
你提到的名詞真的不懂,
從你給出的圖中,我只找到一個基礎圖(如圖),但是不是你所講的迴路就真的不明了~如果做出一個高精度的基礎圖,然後放大縮小旋轉調色去擴散,應該可以做出你的圖的70%左右的效果,但要ps自動去做就真的不明了,樓下的可補充。
『叄』 一張GIF旋轉的星空圖片
題目太大!不知道具體要求。。。
『肆』 android怎麼實現圖片旋轉
可以使用RotateAnimation動畫實現,設定無限循環即可
代碼如下
{
ImageViewiv;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_two);
iv=(ImageView)findViewById(R.id.image);
RotateAnimationanimation=newRotateAnimation(0,360);
animation.setDuration(100000);//設定轉一圈的時間
animation.setRepeatCount(Animation.INFINITE);//設定無限循環
animation.setRepeatMode(Animation.RESTART);
iv.startAnimation(animation);
}
}
也可以自定義view繼承於imageview,啟動一個線程,在while循環里設置view的旋轉角度
{
privatefloatmCurDegree=0;//當前旋轉角度
publicRotateView(Contextcontext,AttributeSetattrs){
super(context,attrs);
newThread(this).start();
}
@Override
protectedvoidonLayout(booleanchanged,intleft,inttop,intright,
intbottom){
super.onLayout(changed,left,top,right,bottom);
//設定旋轉中心
setPivotX(getMeasuredWidth()/2);
setPivotY(getMeasuredHeight()/2);
}
@Override
publicvoidrun(){
while(true){
setRotation(mCurDegree);
mCurDegree+=5;
postInvalidate();
SystemClock.sleep(16);
}
}
}
在布局文件里使用RotateView代替imageview即可
『伍』 如何旋轉圖片(最簡單的方法)
用各種看圖軟體都可以實現,想永久旋轉就得用編輯軟體方法很簡單,自己琢磨
『陸』 怎麼用PS把圖片上的圖案無限循環,要無縫拼接
幫你做了一個,你試試看。
『柒』 html,jquery怎樣實現圖片旋轉中換圖的時候不只是兩張圖片的切換,而是從本地調用到多張圖片進行循環
把變換的圖片都寫在html中,拉動距離實現,
『捌』 我想在網頁上實現一個小圖片在不停的旋轉的效果,就在那兒不停的360度轉啊轉的樣子
下面是用css旋轉圖片,用js換className。
換圖片地址後試試。
<html>
<head>
<style>
.css-turn-0{
-moz-transform:matrix(1,0,0,1,0,0);
-o-transform:matrix(1,0,0,1,0,0);
-webkit-transform:matrix(1,0,0,1,0,0);
transform:matrix(1,0,0,1,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='autoexpand')"
}
.css-turn-270{
-moz-transform:matrix(0,-1,1,0,0,0);
-o-transform:matrix(0,-1,1,0,0,0);
-webkit-transform:matrix(0,-1,1,0,0,0);
transform:matrix(0,-1,1,0,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0,M12=1,M21=-1,M22=0,SizingMethod='autoexpand')"
}
.css-turn-180{
-moz-transform:matrix(-1,0,0,-1,0,0);
-o-transform:matrix(-1,0,0,-1,0,0);
-webkit-transform:matrix(-1,0,0,-1,0,0);
transform:matrix(-1,0,0,-1,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=0,M21=0,M22=-1,SizingMethod='autoexpand')"
}
.css-turn-90{
-moz-transform:matrix(0,1,-1,0,0,0);
-o-transform:matrix(0,1,-1,0,0,0);
-webkit-transform:matrix(0,1,-1,0,0,0);
transform:matrix(0,1,-1,0,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0,M12=-1,M21=1,M22=0,SizingMethod='autoexpand')"
}
</style>
</head>
<body>
<imgsrc="圖片地址">
<script>
varimg=document.getElementsByTagName('img')[0],
i=1,
css=['css-turn-0','css-turn-90','css-turn-180','css-turn-270'];
img.onclick=function(){
this.className=css[i++%4];
}
</script>
</body>
</html>
轉自zhaoapk 的回答。
『玖』 PS里怎麼把一張圖做成GIF旋轉圖
工具:pscs4
1、把需要處理的圖片直接拖進ps里,如圖所示。
『拾』 在ps中如何依次出現旋轉過的圖片
在ps中依次出現旋轉過的圖片製作方法是:
1、新建白色背景文件,打開圖片,拖進背景文件里,復制圖層(兩層以上);
2、逐圖層ctrl+t旋轉圖片;