使用纯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 ...
随机推荐
- AI-序列化-做五个数据接口
#url.py url(r'^customer/$', views.CustomerView.as_view()), #查询所有数据.添加数据接口url url(r'^customer/(\d+)', ...
- Pthon面向对象之基础
命名空间 class Course: language = 'Chinese' def __init__(self,teacher,name,period,price): self.teacher = ...
- IDEA中tomcat的部署
创建一个项目就要部署tomcat
- 处理json大文件
import json import pymysql # 读取review数据,并写入数据库 # 导入数据库成功,总共4736897条记录 def prem(db): cursor = db.curs ...
- INFO JobScheduler: Added jobs for time 1524468752000 ms/INFO MemoryStore: Block input-0-1524469143000 stored as bytes in memory/完全分布式 ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行
1.完全分布式 ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行: 1 [hadoop@slaver1 spark- ...
- Hadoop的namenode的管理机制，工作机制和datanode的工作原理
HDFS前言: 1) 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: 2)在大数据系统中作用: 为各类分布式运算框架(如:mapr ...
- Crystal Reports报表使用 [一]
1.Crystal Reports 是什么? Crystal Reports 是一个功能强大.动态和可操作的报表解决方案,它将帮助你通过网络设计.开发.可视化及发布报表,或嵌入到企业应用之中.有了它, ...
- mysql基本操作（一）
1.登录mysql mysql -h localhost -u root -p 登录mysql,其中 -h是指定要连接mysql服务器的主机名 -u是指定用户 -次数登录必须用-p输入密 ...
- libsecp256k1 与 openssl ecdsa
1. 历史 区块链节点在接收到的用户发送的交易时,首先会验证交易所涉及utxo的可用性.方法是验证用户签名的合法性,涉及的签名算法就是secp256k1,一种椭圆曲线加密算法. 长期以来,实现了该算法 ...
- window与linux文件共享解决方案
我的系统是windows7 x64,虚拟机上的linux系统是centos6.5 方法一: 1.在win7系统上建立一个用户 2.在f盘建立一个文件夹linuxshare,然后右击-属性-共享-高级共 ...