css怎么画小方块,CSS3 小方块矩阵变换动画
CSS
语言:
CSSSCSS
确定
.spinning-pixels-loader {
width: 10px;
height: 10px;
background: #f35626;
margin: 200px auto;
box-shadow: 15px 15px 0 0 #f35626, -15px -15px 0 0 #f35626, 15px -15px 0 0 #f35626, -15px 15px 0 0 #f35626, 0 15px 0 0 #f35626, 15px 0 0 0 #f35626, -15px 0 0 0 #f35626, 0 -15px 0 0 #f35626;
-webkit-animation: anim 2s linear infinite;
animation: anim 2s linear infinite;
}
@-webkit-keyframes anim {
0% {
-webkit-filter: hue-rotate(0deg);
}
50% {
box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
}
75% {
box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-filter: hue-rotate(360deg);
}
}
@keyframes anim {
0% {
-webkit-filter: hue-rotate(0deg);
}
50% {
box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
}
75% {
box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-filter: hue-rotate(360deg);
}
}
css怎么画小方块,CSS3 小方块矩阵变换动画相关推荐
- css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效 代码结构 1. 引入CSS 2. HTML代码 基本样式: Basic star rating: 5 stars 4 stars ...
- css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
- css怎么画错号,CSS3 对/错符号的切换动画
CSS 语言: CSSSCSS 确定 .select { margin: 2rem; height: 40px; width: 200px; border: 1px solid #ededed; cu ...
- css 延时几秒代码,CSS3 会聚展开文字动画实例及animation-delay属性规则
CSS3中制作动画有两个控制时间的属性,一个是动画持续时间,另一个是动画延迟时间,也就是本篇要讨论的animation-delay属性,它用于控制动画延迟多长时间,也就是打开网页后等待多久动画才开始, ...
- css可以做什么小船,CSS3 大航海小船动画
CSS 语言: CSSSCSS 确定 .ship-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: au ...
- 用kotlin来实现一个打方块的小游戏
前言 今天来做个打方块的小游戏,继续熟悉kotlin的语法,看下要实现的效果图 看着效果图好像挺难的样子,但理清思绪后,你会发现特别的简单,还是那句话,学习方法最重要 思路 构造界面 : 这个部分比较 ...
- java多线程小游戏_Java多线程实现方块赛跑小游戏
本文实例为大家分享了Java实现方块赛跑小游戏的具体代码,供大家参考,具体内容如下 在一个图形界面上构造两个位于同一起跑线方块,起跑线位于界面靠左位置, A 方块先开始运动,向右移动 50 像素后停止 ...
- 13.鼠标拖拽:案例:鼠标拖拽小方块,小方格跟着移动(桌面图标拖动)
目录 一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
- java移动方块小游戏_Java多线程实现方块赛跑小游戏
本文实例为大家分享了Java实现方块赛跑小游戏的具体代码,供大家参考,具体内容如下 在一个图形界面上构造两个位于同一起跑线方块,起跑线位于界面靠左位置, A 方块先开始运动,向右移动 50 像素后停止 ...
最新文章
- 从assemblyer Instructure deepth understander C principle
- J2ME下漫游(追逐)AI的实现
- GraphicsMagick扩展配置安装
- hdu1501 记忆化搜索
- hmailserver mysql密码_第二步:点晴MIS系统Email模块hMailServer数据库连接配置指引
- vue组件命名指南,不为取名而纠结
- 【XSY3350】svisor - 点分治+虚树dp
- 屏蔽Idea中不合理的提示警告
- 字符串中去除连续相同的字符保留一个
- LY.JAVA面向对象编程.内存图
- 基于IFC标准的4DBIM可视化平台
- Share:思科模拟器 路由配置(默认、静态、动态RIP)
- Tcl 语言——过程与字符串匹配篇
- python 直线方程,两点直线方程的返回方法
- C#也能做机器学习?基于.NET的AI智能应用市场还是一片“处女地”
- Spring Ioc源码分析系列--容器实例化Bean的四种方法
- 员工管理系统实现方案
- 营收、GMV飞升,有赞的亏损病仍然无解?
- ubuntu 部署ATX
- java实现古堡算式
热门文章
- [附源码]计算机毕业设计JAVAjsp高校奖学金评定管理系统
- python从邮箱获取指定邮件_用python提取并统计指定邮箱里的特定邮件
- 一键查询微信加过那些群聊
- javaSE-day04--ArrayList基本用方法、类内定义方法和方法重载、静态方法static(类的方法)、工具方法(static)的定义和使用
- JavaScript百炼成仙 1.18 函数七重关之一 (函数定义)
- 亿图图示--工业自动化模块--啤酒生产处理流程简图和热水冷凝处理架构
- 游戏小程序有哪些?这3个小程序值得推荐!
- c语言平均绩点_【干货】你们关心的GPA算法来了!
- banq修复_SM3271AB_慧荣SM3271AB U盘量产加密及修复教程 - 系统部
- 盘点国内EDA软件公司