首页

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)" x="3.43933983" y="3.47487373" 宽度=“13.1923882”高度=“13.1923882”>
</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)" x="3.43933983" y="3.47487373" 宽度=“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>

;

问
</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.7630198 Z" id="路径2" 笔划="#A68385" 变换="翻译(10.000000 , 7.631510) 旋转( -180.000000) 翻译(-10.000000, -7.631510) ">
</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.7630198 Z" id="路径2" 笔划="#A68385" 变换="翻译(10.000000 , 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中最基本的特效之一，通过改变某个属