css3高级动画

最新推荐文章于 2023-06-08 15:08:57 发布
最新推荐文章于 2023-06-08 15:08:57 发布
阅读量941 收藏 4
点赞数
原文链接：https://juejin.im/post/5b5045dee51d45194832eb49
版权

放上做的两个小的css3动画，先附上简单的静态图：


以下是我的github上的动画效果

高级立方体：

yangyufei.github.io/css3/html/%…

幸福摩天轮:

yangyufei.github.io/css3/html/%…


高级立方体代码如下：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3高级立方体</title>
	<style>
		.wrap {
			width: 200px;
			margin: 0 auto;
			/*设置视角*/
			-webkit-perspective: 800;
			-webkit-transition: all 1s linear;
			/*如果不设置默认为无限远的距离，设置不同的视角大小，指的是距离物体的px值。将视角设置不同的层级上面也会有不同的效果*/

		}
		.cube {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 200px auto 0;
			-webkit-transform-style: preserve-3d;
			/*-webkit-transform: rotateX(30deg) rotateY(75deg);*/
			-webkit-animation: bg-change 3s linear infinite;
			/*通常是放在父级 将变形的样式设置为3d样式*/
		}
		.wrap:hover .cube div:nth-child(1){
			
			-webkit-transform: translateZ(200px);
		}
		.wrap:hover .cube div:nth-child(2){
			-webkit-transform: rotateY(180deg) translateZ(200px);
			
		}
		.wrap:hover .cube div:nth-child(3){
			-webkit-transform: rotateY(90deg) translateZ(200px);
			
		}
		.wrap:hover .cube div:nth-child(4){
			-webkit-transform: rotateY(-90deg) translateZ(200px);
		}
		.wrap:hover .cube div:nth-child(5){
			-webkit-transform: rotateX(90deg) translateZ(200px);
		}
		.wrap:hover .cube div:nth-child(6){
			-webkit-transform: rotateX(-90deg) translateZ(200px);
		}
		.cube div {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			/*-webkit-backface-visibility: hidden; *//*背部隐藏，解决透视效果*/
			
		}
		@-webkit-keyframes bg-change {
			from {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
			}
			to {
				-webkit-transform: rotateX(360deg) rotateY(360deg);
			}
		}
		/*前后面*/
		.cube div:nth-child(1){
			background: url(../images/1.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: translateZ(100px);
			-webkit-transition: all 1s linear;
		}
		.cube div:nth-child(2){
			background: url(../images/2.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: rotateY(180deg) translateZ(100px);
			-webkit-transition: all 1s linear;
		}
		/*左右面*/
		.cube div:nth-child(3){
			background: url(../images/3.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: rotateY(90deg) translateZ(100px);
			-webkit-transition: all 1s linear;
		}
		.cube div:nth-child(4){
			background: url(../images/4.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: rotateY(-90deg) translateZ(100px);
			-webkit-transition: all 1s linear;
		}
		/*上下面*/
		.cube div:nth-child(5){
			background: url(../images/5.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: rotateX(90deg) translateZ(100px);
			-webkit-transition: all 1s linear;
		}
		.cube div:nth-child(6){
			background: url(../images/6.png) center center no-repeat;
			background-size: contain;
			-webkit-transform: rotateX(-90deg) translateZ(100px);
			-webkit-transition: all 1s linear;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="cube">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</div>
	<script></script>
</body>
</html>复制代码



幸福摩天轮代码如下：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3幸福摩天轮</title>
	<style>
		body,html {
			width: 100%;
			height: 100%;
		}
		.wrap {
			height: 100%;
			background: url(../images/2.jpg) center center no-repeat;

		}
		.con {
			position: relative;
			width: 600px;
			height: 600px;
			margin: 0 auto;
			-webkit-transform-style: preserve-3d;
		}
		.outer {
			position: relative;
			z-index: 1;
			width: 600px;
			height: 600px;
			background: url("../images/fsw.png") center center no-repeat;
			background-size: contain;
			-webkit-animation: bg-change 6s linear infinite;
		}
		@-webkit-keyframes bg-change {
			0% {
				-webkit-transform: rotateZ(0deg);
			}
			100% {
				-webkit-transform: rotateZ(360deg);
			}
		}
		.font {
			position: absolute;
			z-index: 2;
			top: 150px;
			left: 100px;
			width: 400px;
			height: 250px;
			background: url("../images/big-title.png") center center no-repeat;
			background-size: contain;
		}
		.outer div {
			width: 100px;
			height: 100px;
		}
		.outer div:nth-child(1) {
			position: absolute;
			z-index: 1;
			top: 0px;
			left: 250px;
			background: url(../images/dog.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(2) {
			position: absolute;
			z-index: 1;
			top: 100px;
			left: 440px;
			background: url(../images/girl.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(3) {
			position: absolute;
			z-index: 1;
			top: 280px;
			left: 530px;
			background: url(../images/boy.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(4) {
			position: absolute;
			z-index: 1;
			top: 480px;
			left: 450px;
			background: url(../images/girls.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(5) {
			position: absolute;
			z-index: 1;
			top: 570px;
			left: 250px;
			background: url(../images/hairboy.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(6) {
			position: absolute;
			z-index: 1;
			top: 480px;
			left: 50px;
			background: url(../images/mimi.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(7) {
			position: absolute;
			z-index: 1;
			top: 280px;
			left: -20px;
			background: url(../images/mudog.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		.outer div:nth-child(8) {
			position: absolute;
			z-index: 1;
			top: 120px;
			left: 50px;
			background: url(../images/mimi.png) center center no-repeat;
			background-size: contain;
			-webkit-animation: rot 6s linear infinite;
		}
		@-webkit-keyframes rot {
			from {
				-webkit-transform: rotateZ(360deg);
				-webkit-transform-origin: 50% top;
			}
			to {
				-webkit-transform: rotateZ(0deg);
				-webkit-transform-origin: 50% top;
			}
		}
		.inner {
			position: absolute;
			top: 300px;
			left: 200px;
			width: 200px;
			height: 400px;
			background: url(../images/bracketsmall.png) center center no-repeat;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="con">
			<div class="outer clearfix">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="font clearfix">
			</div>
			<div class="inner"></div>
		</div>
	</div>
	<script></script>
</body>
</html>复制代码


今天写完这篇博文很开心，因为我今天懂得怎么弄掘金的链接，怎么弄代码块了，掘金确实是比网易博客好用多了，哈哈哈哈哈哈~~~


weixin_34174422
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
27个精致的CSS3动画效果源代码下载
08-21
27个精致的CSS3动画效果源代码下载
用html和css为女朋友做了个幸福摩天轮，她很开心，我很骄傲
热门推荐
huangfuyk.的博客
04-27 1万+
幸福摩天轮，够爱你就来
超酷震撼 HTML5/CSS3动画应用及源码
weixin_33682719的博客
06-12 1124
HTML5可以制作非常华丽的动画效果，这点通过之前的分享学习我们已经有深刻的了解了，今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码，真的非常不错。 1、纯CSS3创意Loading加载动画 今天要来分享一款非常具有创意的CSS3 Loading动画效果，整个Loading动画就像一部开足马力的发动机，在不停地循环工作，看上去Loading动画样式十分新颖。...
纯css实现那些超炫酷的动画效果
xybhua的博客
12-29 2021
点击进入直播间data() {return {}},}
CSS高级----动画
bjsyc123456的博客
10-20 268
过渡 使用过渡就是为了让过程不那么僵硬，过程更 “ 滑~ ” 一点 语法： transition: 属性 时间(秒[s] 或者 毫秒[ms]为单位); 演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
3d旋转相册—css3高级进阶
04-13
在本课程"3d旋转相册—css3高级进阶"中，我们将深入探讨如何利用CSS3的强大功能创建一个令人印象深刻的3D旋转相册。这个项目非常适合那些已经具备一定编程经验，特别是对HTML和CSS有基本理解的开发者。通过学习这个...
纯css3炫酷粒子动画特效
12-13
【CSS3炫酷粒子动画特效】是一种利用现代浏览器对CSS3特性的支持，通过编程方式创建出视觉上引人入胜的动态效果。这个特效主要依赖于CSS3的动画（Animations）和转换（Transforms）特性，以及可能的伪元素（Pseudo-...
滑动监听高度执行css3动画特效
06-22
总之，"滑动监听高度执行css3动画特效"是结合了CSS3动画和JavaScript滚动事件处理的一种高级交互技术，它为网页带来了生动有趣的动态效果，同时提升了用户与网站的交互体验。通过理解和实践这些知识点，开发者能够...
CSS3加载动画Loading代码.zip
05-14
此外，CSS3还支持更高级的动画控制，如延迟（delay）、填充模式（fill mode）和方向（direction），这使得开发者能对动画的每一细节进行定制。例如，我们可以设置动画在开始前暂停一段时间，或者让动画在完成一次后...
PPT模板高级动画特效
01-22
在本文中，我们将深入探讨如何利用CSS3技术来实现这些高级动画效果，并了解它们在前端开发中的应用。 首先，PPT模板的获取是制作动画特效的第一步。你可以从在线资源库或专业设计网站上下载各种风格的模板，这些...
【css 动画】css实现奔跑的北极熊
阿牛的博客
11-10 1万+
最近正好在总结css动画相关方面的博客，乘此机会写几个好看有趣的动画特效，css动画还是很有趣的，本文就用动画实现一个奔跑的北极熊！
css实现快速抖动效果_通过CSS实现炫酷的动画效果
weixin_39769183的博客
12-22 3227
1.Animate.css简介Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所...
css动画效果代码案例_25个CodePen上激发你创作灵感的动画案例，附源码
weixin_39985820的博客
11-29 2111
作品来源 |https://codepen.io/文章整理| 杨小二CodePen是很多程序员用来展示代码创作的首选在线工具。今天，我为大家精选的25个CodePen上CSS动画展示案例，这些动画案例作品均来源于CodePen上，所有作品均归原创作者所有，我在这里只是与大家分享学习使用。并且在每个作品下面都附上了作品的源码地址，供大家学习使用，这个gif动画，是我在编辑文章时候，通...
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 7417
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
代码：css3动画效果demo
weixin_30374009的博客
11-13 104
代码：css3动画效果demo 四行文字会逐次掉落: 如果要停留在最后一帧的动画，注意要用forwards，不要用both。 <style type="text/css"> @-webkit-keyframes fadeInDown1 { 0% { -webkit-transform: tran...
12个优美的CSS动画案例
frontlab的博客
12-12 1万+
大家好,我是前端实验室的大师兄! 对于网页设计师和开发工程师而言，创建一款极具趣味性和实用性的CSS网页动画，能让网站美观不少 CSS动画，就是通过CSS代码搭建网页动画。允许设计师和开发人员，通过编辑网站的CSS代码来添加页面动画，从而轻松取代传统动画图片或flash动画的设计方式。 因此设计师和开发人员就可简单通过粘贴复制CSS代码，快速复用其动画设计，轻松提高网站兼容性的同时，提升网页加载速度。 今天大师兄就带来了十套精美的css动画，还有css源码呦，复制粘贴就能使用 1.Fl..
CSS高级 animation动画
最新发布
qq_46167326的博客
06-08 105
【代码】CSS高级 animation动画。
CSS3动画与2D变形详解
CSS3动画（`animation`）是更高级的动态效果，允许开发者定义一系列的关键帧，元素将在指定的时间内按照这些关键帧的变化进行动画展示。这通常结合`@keyframes`规则来定义动画的过程。 CSS3的动画和变形特性极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值