css3實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫效果及以小程序?yàn)槔?/h1>

效果

點(diǎn)擊按鈕三角形按照一個(gè)三角形的路線移動(dòng)


css動(dòng)畫.gif

實(shí)現(xiàn)思路

主要通過translate這個(gè)屬性控制對(duì)應(yīng)的x軸y軸的移動(dòng)zuo biao

實(shí)現(xiàn)過程

wxml

<view class="container">
  <view class='triangle {{active?"active":""}}'></view>
  <button class='actionbotton' bindtap='action'>點(diǎn)擊開始動(dòng)畫</button>
</view>

css

.container {
  position: relative;
}
//三角形
.triangle {
  width: 0rpx;
  height: 0rpx;
  position: absolute;
  border-left: 50rpx solid transparent;
  border-top: 50rpx solid transparent;
  border-right: 50rpx solid transparent;
  border-bottom: 50rpx solid red;
  margin-top: 300rpx;
}

.actionbotton {
  position: absolute;
  margin-top: 450rpx;
}
//動(dòng)畫定義
.active {
  animation-name: test;//名稱
  animation-duration: 3s;//時(shí)間
  animation-timing-function: linear;//方式
  animation-iteration-count: 5;//次數(shù)
}

@keyframes test {
  0% {
    transform: translate(0rpx, 0rpx);
  }

  20% {
    transform: translate(-300rpx, -300rpx);
  }

  60% {
    transform: translate(300rpx, -300rpx);
  }

  100% {
    transform: translate(0rpx, 0rpx);
  }
}

js

//點(diǎn)擊方法
action:function(){
    this.setData({
      active: !this.data.active
    })
  }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市索抓,隨后出現(xiàn)的幾起案子钧忽,更是在濱河造成了極大的恐慌毯炮,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耸黑,死亡現(xiàn)場(chǎng)離奇詭異桃煎,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)大刊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門为迈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人缺菌,你說我怎么就攤上這事葫辐。” “怎么了男翰?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵另患,是天一觀的道長(zhǎng)纽乱。 經(jīng)常有香客問我蛾绎,道長(zhǎng),這世上最難降的妖魔是什么鸦列? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任租冠,我火速辦了婚禮,結(jié)果婚禮上薯嗤,老公的妹妹穿的比我還像新娘顽爹。我一直安慰自己,他們只是感情好骆姐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布镜粤。 她就那樣靜靜地躺著,像睡著了一般玻褪。 火紅的嫁衣襯著肌膚如雪肉渴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天带射,我揣著相機(jī)與錄音同规,去河邊找鬼。 笑死窟社,一個(gè)胖子當(dāng)著我的面吹牛券勺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灿里,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼关炼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了匣吊?” 一聲冷哼從身側(cè)響起盗扒,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤跪楞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后侣灶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甸祭,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年褥影,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了池户。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凡怎,死狀恐怖校焦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情统倒,我是刑警寧澤寨典,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站房匆,受9級(jí)特大地震影響耸成,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浴鸿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一井氢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧岳链,春花似錦花竞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至苗分,卻和暖如春厌蔽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背俭嘁。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工躺枕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人供填。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓拐云,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親近她。 傳聞我的和親對(duì)象是個(gè)殘疾皇子叉瘩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 剛要想起你薇缅,心就一揪一揪的疼啊危彩。我們?cè)谝粋€(gè)軟件上相識(shí),那是個(gè)看臉的軟件泳桦,和我當(dāng)時(shí)浮躁的心情簡(jiǎn)直太搭了 你像那些朋友...
    花慕男閱讀 214評(píng)論 0 0
  • 前兩天有一篇文章上了簡(jiǎn)書封面灸撰,號(hào)稱要開掛的人生谒府,2018年要實(shí)現(xiàn)不止100個(gè)目標(biāo)。這篇長(zhǎng)文獲得幾百個(gè)贊和幾百句的留...
    胡誠(chéng)閱讀 1,757評(píng)論 1 11
  • 天使班班長(zhǎng) 1201 李夏蓮 20180109(9/100) 廈 晴浮毯,9-12度 【以夢(mèng)為馬完疫,不負(fù)昭華 】 今日我...
    阿白1閱讀 65評(píng)論 0 0
  • 【自助者天助】 憑借著一股韌勁與自強(qiáng)不息的精神,劉備成功考入長(zhǎng)江國(guó)際大學(xué)债蓝,然而壳鹤,當(dāng)收到這個(gè)通知時(shí),劉備母子悲喜交加...
    褐玉雜貨鋪閱讀 579評(píng)論 0 2