简单写一下css2d动画效果

最新推荐文章于 2019-11-24 22:01:34 发布
最新推荐文章于 2019-11-24 22:01:34 发布
阅读量222 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/102491346
版权

动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>科技</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				
			}
			html,body{
				height: 100%;
				widows: 100%;
				
			}
			.box{
				overflow: hidden;
				height: 100%;
				width: 100%;
				/*background-color: red;*/
				animation: gradation 15s infinite;
				display: flex;
			}
			@keyframes gradation {
				0%{
					background-color: red;
				}
				12.9%{
					background-color: #fbc2eb;
				}
				34.5%{
					background-color: #fad0c4;
				}
				66%{
					background-color: #ffd1ff;
				}
				79%{
					background-color: #ffecd2;
				}
				88%{
					background-color: #fdcbf1;
				}
				100%{
					background-color: #d4fc79;
				}
			}
			.box .photos{
				overflow: hidden;
				align-items: center;
				margin: 0px auto;
				display: flex;
				animation: gradation1 5s infinite;
				
			}
			@keyframes gradation1{
				0%{
					transform: rotate(0deg);
				}
				30%{
					transform: rotate(50deg);
					
				}
				60%{
					transform: rotate(560deg);
				}
				100%{
					transform: rotate(0deg);
				}
			}
			.box .photos img{
				
				height: 300px;
				width: 300px;
			  
		
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="photos">
				<img src="img/b91a258c823d715c62521fada8510abe.png"/>
			</div>
		</div>
	</body>
</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML写一个登录框样式
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用js做一个简单的计算器
TISRNW的博客
10-29 1758
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
轮播图（点击小点点让他跳转到具体某一张）
TISRNW的博客
10-25 1623
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播 具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
js入门 （用wasd来移动一个小色块）
TISRNW的博客
10-23 808
获取你的事件按钮之后，就可以根据键位来改变小色块的位置。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...
js手写一个视频播放h5
TISRNW的博客
11-24 725
css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
用js手写一个简单的日历
TISRNW的博客
11-10 691
代码中有注释 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>日历</title> <style type="text/css"> html,body{ background-color: antiquewhi...
js写一个钟表
TISRNW的博客
11-01 492
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } html...
ajak 拉取json数据填充html
TISRNW的博客
10-26 455
通过ajak方法访问文件，获取其中的数据，将其填充到HTML中 xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ var result = JSON.parse(xhr.response) console.log(result)...
加载缓冲效果实现js
TISRNW的博客
10-27 443
在获取数据前开始加载，填充到页面后让加载效果消失 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; pad...
canvas代码雨效果
TISRNW的博客
11-22 428
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,b...
鼠标拖动小方块（js监听器）
TISRNW的博客
10-25 409
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0rem; padding: 0rem; } h...
轮播图纯代码原理
TISRNW的博客
10-16 256
核心就是很简单的两个方法。 加上事件和样式就完成了轮播图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> </style> &...
js结合localStorage紫萼一个简陋的记事本
TISRNW的博客
10-30 251
没有写样式，感兴趣的的可以去antd或者bs上拿点样式 主要点将你输入的内容永久的存下并填充到页面，稍微难点的是获取事件并将其转化为自己想要的格式 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用flex写筛子的各个面
TISRNW的博客
10-10 246
用flex写小圆圈在一个方块里怎么布局。 主要用到flex的 justify-content: ; flex-wrap: ; align-items: ; 等等挺简单的一些css <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>筛子</titl...
懒加载和浮现导航条的js基础代码
TISRNW的博客
10-25 239
获取屏幕的scrollY，当屏幕大于一定的数值时，让原本不现实的内容让他显示，懒加载是再加上一些动画，让他逐渐浮现。 有一些无用的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
笔记222222222222222222222222222222
最新发布
08-04
笔记222222222222222222222222222222
仿拉钩App小程序.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
华云智慧园区.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
新浪读书.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值