使用纯CSS制作展开合并立方体特效
显示效果
源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css动画练习</title>
</head>
<style>
body {
background: #999;
margin: 0 auto;
font-size: 100px;
height: 100%;
}
div {
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
}
div.a {
background: red;
transition: width 2s, height 2s, transform 2s;
}
div.b {
background: yellow;
transition: width 2s, height 2s, transform 2s;
}
div.c {
background: blue;
transition: width 2s, height 2s, transform 2s;
}
div.d {
background: pink;
transition: width 2s, height 2s, transform 2s;
}
div.e {
background: white;
transition: width 2s, height 2s, transform 2s;
}
div.f {
background: purple;
transition: width 2s, height 2s, transform 2s;
}
body:hover div.a {
width: 200px;
height: 200px;
transform: rotatex(260deg) rotate(90deg) translate(1100px, 0);
}
body:hover div.b {
width: 200px;
height: 200px;
transform: rotatex(-180deg) rotate(90deg) translate(300px, 0);
}
body:hover div.c {
width: 200px;
height: 200px;
transform: rotatey(-80deg) rotate(-90deg) translate(300px, -600px);
}
body:hover div.d {
width: 200px;
height: 200px;
transform: rotatey(80deg) rotate(90deg) translate(-300px, -600px);
}
body:hover div.e {
width: 200px;
height: 200px;
transform: rotatex(80deg) rotate(90deg) translate(-2300px, 0);
}
body:hover div.f {
width: 200px;
height: 200px;
transform: rotatex(360deg) rotate(90deg) translate(-300px, 0);
}
</style>
<body >
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</body>使用纯CSS制作展开合并立方体特效的更多相关文章
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
随机推荐
- ActiveSync的Settings命令
在[MS-ASCMD]中,Settings命令的功能这样定义的: The Settings command also sends device information to ...
- Idea和PyCharm激活破解
1. 先去百度去官网下载专业版IDE, Idea 和PyCharm激活方法一样 2. 下载破解包, 点击下载 3. 将下载的jar包放到这个安装目录的bin目录下面 4. 在bin目录下面的文件pyc ...
- exec函数族
进程程序替换 进程程序替换原理 fork创建子进程执行的是和父进程相同的程序(也有可能是某个分支),通常fork出的子进程是为了完成父进程所分配的任务,所以子进程通常会调用一种exec函数(六种中的任 ...
- 批处理命令调用WINRAR对文件进行压缩
命令: winrar a 参数 压缩后的文件 压缩源文件 如压缩apk文件,代码如下 echo apk文件不能直接下载,所以压缩apk成rar来下载 d: cd D:\Program Files\W ...
- ELK日志分析平台环境部署 （yum安装）
前言:通常体质被分散存储在不同的设备上面,在庞大的服务器集群中,我们需要集中化的管理,日志的统计和检索,一般我们使用grep和awk,wc等linux命令虽然能够实现检索和统计,但是呢,对于要求更高的 ...
- C# 类的序列化和反序列化
序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象的状态,重新创 ...
- web发展阶段简介
web1.0.web2.0和web3.0的区别前言: 其实并没有什么所谓的2.0.3.0,因为你没法准确的界定它是什么样的应用,也没法界定它是什么时候开始的,什么时候结束,它只是互联网本身发展的一种 ...
- oracle左连接连表查询
要想把该表的数据全部查出来,必须select中出现该表的字段. SELECT distinct a.ZGSWSKFJ_DM,b.ZGSWJ_DM,b.SSGLY_DM,b.NSRSBH,b.NSRMC ...
- POJ 1470 Closest Common Ancestors (模板题)(Tarjan离线)【LCA】
<题目链接> 题目大意:给你一棵树,然后进行q次询问,然后要你统计这q次询问中指定的两个节点最近公共祖先出现的次数. 解题分析:LCA模板题,下面用的是离线Tarjan来解决.并且为了代码 ...
- Logstash读取Kafka数据写入HDFS详解
强大的功能,丰富的插件,让logstash在数据处理的行列中出类拔萃 通常日志数据除了要入ES提供实时展示和简单统计外,还需要写入大数据集群来提供更为深入的逻辑处理,前边几篇ELK的文章介绍过利用lo ...