首頁

JS特效

CSS3特效

css3的撲克牌展開折疊動畫特效

css3撲克牌展開折疊動畫特效是一款css3 svg製作的點擊卡牌展開和收起動畫效果。

現在下載預覽

css3撲克牌展開折疊動畫特效是一款css3 svg製作的點擊卡牌展開和收起動畫效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3撲克牌展開折疊動畫特效</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body><script src="/demos/googlegg.js"></script>

<div class="perspective">
<div class='card-container'>
# <div class="message">點選左側卡</div>
<div class='card card-card1'>
<div class='card__face card__face--top'>
<span class='card__value'>
A
</span>
# <span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" stroke="#635F5C"></path>
</g>
</svg>
</span>
# </div>

A＃＃＃ </span>

<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="第 1 頁" 筆畫 ="無" 筆畫寬度 ="1" 填充 ="無" 填充規則 ="evenodd">
<路徑 d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" 筆劃="#635F5C"></path>
</g>
</svg>
</span>

K
</span>

<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="第 1 頁" 筆畫 ="無" 筆畫寬度 ="1" 填充 ="無" 填充規則 ="evenodd">
<矩形id="矩形-3" 描邊="#A68385" 變換="翻譯(10.035534, 10.071068) 旋轉(-315.000000) 平移(-10.035534, -10.071068) 平移(-10.035534, -10.071068) 平移(-13339738"寬度=“13.1923882”高度=“13.1923882”>
</g>
</svg>
</span>

;

問
</span>

<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="第 1 頁" 筆畫 ="無" 筆畫寬度 ="1" 填充 ="無" 填充規則 ="evenodd">
<圓 id="橢圓形" 筆畫="#635F5C" cx="4.5" cy="13.5" r="4">
<圓 id="橢圓形" 筆畫="#635F5C" cx="10.5" cy="4.5" r="4">
<圓 id="橢圓形" 筆畫="#635F5C" cx="16.5" cy="13.5" r="4">
</g>
</svg>
</span>

;

J
</span>

<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="第 1 頁" 筆畫 ="無" 筆畫寬度 ="1" 填充 ="無" 填充規則 ="evenodd">
<路徑 d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.76301980107680010 , 7.631510) 旋轉( -180.000000) 翻譯(-10.000000, -7.631510) ">
</g>
</svg>
</span>

;

<腳本類型=“text/javascript”src='js/jquery.min.js'></script>
<腳本類型=“text/javascript”src=“js/index.js”>
</body>

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展，網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用，可為網頁增添動感與視覺效果，提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例，幫助開發者更熟練地運用CSS3特效，提升網頁的使用者體驗。過渡效果（Transition）過渡效果是CSS3中最基本的特效之一，透過改變某個屬