HTML5 / CSS3 Transform / Animation 示例页面

最新推荐文章于 2024-04-18 00:11:40 发布
最新推荐文章于 2024-04-18 00:11:40 发布
阅读量34 收藏
点赞数
原文链接：https://my.oschina.net/tommyfok/blog/207237
版权 
<!DOCTYPE HTML>
<html>
<head>
	<!--先声明好charset以免错误解析title的中文或其他字符-->
	<meta charset="utf-8">
	<title>Tommy's 3D page.</title>
	<!--针对手机的标签，用于设定页面显示大小、比例和禁用用户缩放页面-->
	<meta content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" name="viewport">
	<!--针对Apple的元标签-->
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--禁用手机对电话号码和日期的自动检测链接-->
	<meta name="format-detection" content="telephone=no,date=no">
	<!--强制360浏览器使用webkit内核渲染-->
	<meta name="renderer" content="webkit">
	<!--针对IE：如果服务器安装了谷歌内嵌浏览器框架GCF则使用Chrome来渲染页面，否则使用IE最高版本来渲染-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="keywords" content="html5,css3,javascript,mobile-development">
	<meta name="description" content="Tommy's 3D page is a sample page of html5 for mobile web use.">
	<meta name="author" content="front-end development by @fs-beta">
</head>
<body>
	<style>
		html,body{
			font-family: Verdana;
		}
		body{
			max-width:320px;
			margin:0 auto;
			padding: 0;
		}
		.stage{
			background-color: rgba(0,0,0,0.1);
			height:80px;
			margin:5px;
			margin-top: 0;
			border-radius: 2px;
			position: relative;
			/*一、父元素设定3d透视深度*/
			-webkit-perspective:600;
			-moz-perspective:600;
			-ms-perspective:600;
			-o-perspective:600;
			perspective:600;
		}
		.stage:after{
			content:"按住我查看效果";
			font-size: 11px;
			color:rgba(0,0,0,0.4);
			display: block;
			width: 100px;
			height:30px;
			text-align: center;
			line-height: 30px;
			overflow: hidden;
			position:absolute;
			right:0;
			top:25px;
			text-shadow:1px 1px 1px #FFF;
		}
		.box{
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
			width:80px;
			height:40px;
			position: relative;
			left:20px;
			top:20px;
			color:#FFF;
			font-size: 12px;
			text-align: center;
			line-height: 40px;
			background-color: rgba(0,0,0,0.5);
			/*二、设定子元素的过渡属性（若有关键帧动画则不需要）*/
			-webkit-transition:all .5s ease-in-out;
			-moz-transition:all .5s ease-in-out;
			-ms-transition:all .5s ease-in-out;
			-o-transition:all .5s ease-in-out;
			transition:all .5s ease-in-out;
			/*三、保证子元素的3d效果*/
			-webkit-transform-style:preserve-3d;
			-moz-transform-style:preserve-3d;
			-ms-transform-style:preserve-3d;
			-o-transform-style:preserve-3d;
			transform-style:preserve-3d;
			/*四、设定子元素的变换原点*/
			-webkit-transform-origin:center;
			-moz-transform-origin:center;
			-ms-transform-origin:center;
			-o-transform-origin:center;
			transform-origin:center;
		}
		.box.on{
			background-color: #F60;
			box-shadow: 0 0 5px rgba(255,102,0,0.3);
		}
		.rotate.on{
			/*五、设定子元素的旋转属性*/
			-webkit-transform:rotateY(360deg);
			-moz-transform:rotateY(360deg);
			-ms-transform:rotateY(360deg);
			-o-transform:rotateY(360deg);
			transform:rotateY(360deg);
		}
		.translate.on{
			/*五、设定子元素的位移属性*/
			-webkit-transform:translateX(100px);
			-moz-transform:translateX(100px);
			-ms-transform:translateX(100px);
			-o-transform:translateX(100px);
			transform:translateX(100px);
		}
		.scale.on{
			/*五、设定子元素的变换属性*/
			-webkit-transform:scale(1.5);
			-moz-transform:scale(1.5);
			-ms-transform:scale(1.5);
			-o-transform:scale(1.5);
			transform:scale(1.5);
		}
		.skew.on{
			/*五、设定子元素的变换属性*/
			-webkit-transform:skewY(30deg);
			-moz-transform:skewY(30deg);
			-ms-transform:skewY(30deg);
			-o-transform:skewY(30deg);
			transform:skewY(30deg);
		}
		@-webkit-keyframes spin{
			0% {
				-webkit-transform:rotateY(0deg);
			}
			100% {
				-webkit-transform:rotateY(360deg);
			}
		}
		@-moz-keyframes spin{
			0% {
				-moz-transform:rotateY(0deg);
			}
			100% {
				-moz-transform:rotateY(360deg);
			}
		}
		@-ms-keyframes spin{
			0% {
				-ms-transform:rotateY(0deg);
			}
			100% {
				-ms-transform:rotateY(360deg);
			}
		}
		@-o-keyframes spin{
			0% {
				-o-transform:rotateY(0deg);
			}
			100% {
				-o-transform:rotateY(360deg);
			}
		}
		@keyframes spin{
			0% {
				transform:rotateY(0deg);
			}
			100% {
				transform:rotateY(360deg);
			}
		}
		.p600{
			/*父元素设定3d透视深度*/
			-webkit-perspective:600;
			-moz-perspective:600;
			-ms-perspective:600;
			-o-perspective:600;
			perspective:600;
		}
		.spin{
			text-align: center;
			/*保证子元素的3d效果*/
			-webkit-transform-style:preserve-3d;
			-moz-transform-style:preserve-3d;
			-ms-transform-style:preserve-3d;
			-o-transform-style:preserve-3d;
			transform-style:preserve-3d;
			/*设定动画*/
			-webkit-animation:spin 3s infinite linear;
			-moz-animation:spin 3s infinite linear;
			-ms-animation:spin 3s infinite linear;
			-o-animation:spin 3s infinite linear;
			animation:spin 3s infinite linear;
		}
	</style>
	<div class="p600"><h2 class="spin">Tommy's 3D page.</h2></div>
	<div class="stage">
		<div class="box rotate">旋转</div>
	</div>
	<div class="stage">
		<div class="box translate">位移</div>
	</div>
	<div class="stage">
		<div class="box scale">缩放</div>
	</div>
	<div class="stage">
		<div class="box skew">扭曲</div>
	</div>
	<script src="http://www.citygf.com/game/04/js/jquery.js"></script>
	<script>
		$(function(){
			var isTouch = "ontouchend" in window,
				pDown = isTouch ? "touchstart" : "mousedown",
				pUp = isTouch ? "touchend" : "mouseup";
			$(".stage").on(pDown,function(e){
				var e = e || window.event;
				e.preventDefault();
				$(this).find(".box").addClass("on");
			}).on(pUp,function(e){
				$(this).find(".box").removeClass("on");
			});
		});
	</script>
</body>
</html>

测试地址：http://www.citygf.com/game/05/

转载于:https://my.oschina.net/tommyfok/blog/207237

chisu1439
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用CSS3实现无限循环的无缝滚动的示例代码
12-02
有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 1.克隆A一份完全一样的数据B放在原数据A的后面； 2.使用setInterval...
html空间进入动画界面,HTML5 / CSS3 Transform / Animation 示例页面
weixin_42382944的博客
06-09 478
HTML>Tommy's3Dpage.html,body{font-family:Verdana;}body{max-width:320px;margin:0auto;padding:0;}.stage{background-color:rgba(0,0,0,0.1);height:80px;margin:5px;margin-top:0;border-radius:2px;...
CSS Transform / Transition / Animation 属性的区别
WKY_CSDN的博客
08-18 664
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明:一、transform通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是
HTML5 + CSS3 编程规范
小z的博客
04-18 1665
HTML5和CSS3规范-22-3
CSS3 Transform、Transition和Animation属性总结
热门推荐
诗渊的博客
07-02 2万+
本博文总结了css3中的动画三兄弟：transform、transition和animation，介绍了这三个属性的基本使用方法，通过使用这三个属性可以达到很炫酷的效果。
CSS3之动画(animation)和四个小案例
al654123的博客
03-08 2398
一、动画(animation) 1.动画概述 可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.语法 1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。 2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画 3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。 @keyframes...
【Web2D/3D】CSS3的2D/3D转换transform、过渡transistion、关键帧动画animation（第一篇）
weixin_45620943的博客
12-26 1260
本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas 2D图形绘制，再到SVG，最后到WebGL。
css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式
Jason_from_China的博客
11-24 1213
TRANSTION
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
纯CSS流星雨背景的示例代码
01-19
github地址，喜欢的可以star下哦 插件预览图 ...vue页面使用 <view class=planet_shadow></view> <view class=crater1></view> <view class=crater2></view> <view class=crater3></view> <v
HTML和CSS实现的情人节主题爱心代码
02-06
在这个示例中，使用CSS定义了一个.heart类，用于表示爱心的样式。通过transform属性来旋转爱心，并使用animation属性定义了一个名为heartbeat的动画，使爱心以心跳的方式缩放。 通过HTML的div元素创建了一个具有....
CSS3的动画 Transitions和Transforms和Animation 示例与快速学习
10-19
CSS3的动画 Transitions和Transforms和Animation 示例与快速学习
CSS3实现的闪烁跳跃进度条示例(附源码)
01-19
这个示例的原理是通过大量的css3属性来实现的，如：animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n)，来进行对HTML元素的选择以及控制输出。相信这个伪类选择...
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
node-v8.1.2-linux-armv7l.tar.xz
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
黑马程序员 C语言学习笔记
05-07
持续更新
CSS3的变形transform、过渡transition、动画animation学习
05-25
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3中非常重要的特性，可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3中的transform属性对元素进行平移、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值