Connect_logo_6.png 退出
前端視頻教程 小程序 眾籌源碼 python 商城源碼 商城模板 響應式模板 中文模板 手機模板 企業源碼
充值

CSS3 SVG圖文卡片內容翻轉切換特效

作者/代碼整理:  (轉載請附加本文地址,帶有“懶人原生”字樣的謝絕轉載) 發布日期:2018-10-27
這是一款簡單又創意個性的CSS3 SVG圖文卡片內容翻轉切換特效,左右箭頭按鈕控制切換。


js代碼

<script>
var stage = document.querySelector('.stage');
var background = document.querySelector('.background');

var rotation = 0;

document.querySelector('.button_prev').
addEventListener('click', function () {return applyStyles(rotation += 90);});

document.querySelector('.button_next').
addEventListener('click', function () {return applyStyles(rotation -= 90);});

function applyStyles() {
  background.style.filter = 'hue-rotate(' + rotation + 'deg)';
  stage.style.transform = 'rotateZ(' + rotation + 'deg)';
}</script>

极速快三全天人工计划