C语言 立方体随鼠标转动,HTML5 盒子悬停动效 - 立方体沿鼠标方向翻滚
CSS
语言：
CSSSCSS
确定
/* you can ignore this ones */
.container-inner {
float: left;
width: 100%;
}
.container {
width: auto !important;
}
li {
background-color: rgba(256, 18, 156, 0.9);
-webkit-perspective: 360px;
perspective: 360px;
}
.info {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
width: 100%;
height: 100%;
padding: 0px 10px;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
pointer-events: none;
background-color: rgba(26, 88, 156, 0.9);
}
div.info p {
color: #fff;
font-size: 18px;
font-family: microsoft yahei;
}
.in-top .info {
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: in-top 300ms ease 0ms 1 forwards;
animation: in-top 300ms ease 0ms 1 forwards;
}
.in-right .info {
-webkit-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-animation: in-right 300ms ease 0ms 1 forwards;
animation: in-right 300ms ease 0ms 1 forwards;
}
.in-bottom .info {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
animation: in-bottom 300ms ease 0ms 1 forwards;
}
.in-left .info {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: in-left 300ms ease 0ms 1 forwards;
animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .info {
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: out-top 300ms ease 0ms 1 forwards;
animation: out-top 300ms ease 0ms 1 forwards;
}
.out-right .info {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: out-right 300ms ease 0ms 1 forwards;
animation: out-right 300ms ease 0ms 1 forwards;
}
.out-bottom .info {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
animation: out-bottom 300ms ease 0ms 1 forwards;
}
.out-left .info {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: out-left 300ms ease 0ms 1 forwards;
animation: out-left 300ms ease 0ms 1 forwards;
}
@-webkit-keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-right {
from {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-right {
from {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-bottom {
from {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-bottom {
from {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-left {
from {
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-left {
from {
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@-webkit-keyframes out-right {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
}
}
@keyframes out-right {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
}
}
@-webkit-keyframes out-bottom {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
}
}
@keyframes out-bottom {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
}
}
@-webkit-keyframes out-left {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
}
}
@keyframes out-left {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
}
}
ul {
margin: 0 auto;
padding: 0;
width: 575px;
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
position: relative;
float: left;
width: 180px;
height: 180px;
margin: 5px;
padding: 0;
list-style: none;
}
li a {
display: inline-block;
vertical-align: top;
text-decoration: none;
border-radius: 4px;
}
li h3 {
margin: 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
li p {
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
li .normal {
width: 100%;
height: 100%;
background-color: #ecf0f1;
color: rgba(52, 73, 94, 0.6);
box-shadow: inset 0 2px 20px #e6ebed;
text-align: center;
font-size: 50px;
line-height: 200px;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Lato';
background-color: #0b2b2b;
}
h2 {
color: #fff;
}
h1 {
margin: 0 auto 5px;
text-align: center;
color: #fff;
}
h3 {
font-family: 'Lato', serif;
color: #fff;
}
.container {
width: 100%;
margin: 0 auto;
}
header {
font-family: 'Lato', serif;
text-align: center;
margin: 50px 0 25px;
color: #34495e;
}
header p {
margin: 0;
color: rgba(52, 73, 94, 0.4);
}
C语言 立方体随鼠标转动,HTML5 盒子悬停动效 - 立方体沿鼠标方向翻滚相关推荐
- 前端实现炫酷动效_最好的H5动效视频教程：HTML5炫酷动效案例
一个元素,动态的往往比静态的更能吸引人们的注意力,由此推之,一个操作界面,活泼的动效交互反馈将会给用户带来更好的操作体验和感知.小到APP的Loading动画,大到各大网站炫酷的H5运营页的展现,可以 ...
- html5掉落效果,HTML5 菜单掉落动效
CSS 语言: CSSSCSS 确定 /* Getting dressed */ body { background: rgba(237, 237, 235, 0.7) url('http://bui ...
- html5 canvas爆炸,TweenMax.js HTML5/Canvas 爆炸动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById('canvas'), ctx = ...
- 网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
一.按钮动效的使用 在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件: 点击按钮添加事件后将会出现一个事件编辑框,在 ...
- HTML5电子书翻页效果 代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍 源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文 源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
- html5盒子模型作业,HTML5盒子模型。
盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...
- JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标
分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...
- html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例 发布时间:2020-10-04 12:47:25 来源:脚本之家 阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
- html5 盒子阴影效果,如何制作平滑的“box-shadow”盒子阴影动画效果
在我们制作box-shadow属性的动画的时候,每一帧动画都会引起浏览器的重绘操作,严重影响页面的性能.我们有什么办法可以解决动画box-shadow属性时页面的性能问题呢?答案是:没有!但是我们可以 ...
最新文章
- NLP中的Mask全解
- IdentityServer4环境部署失败分析贴（一）
- python教学案例-Python机器学习经典实例
- 7.4.4 主成分分析 PCA
- linux 手动安装 oracle（转）
- 对于个人（注册表）与团队(团队表)（两张表没有关联）的展示与可空判断
- mysql通常使用语句_Mysql 常用SQL语句集锦
- linux 集群 lvs,linux集群--LVS集群
- 在家办公怎么弄？华为云DevCloud宝典一看就懂——项目管理篇
- EasyRecovery如何恢复javascript文件
- 181012词霸扇贝有道每日一句
- 深圳最新10区地图划分JSON
- android studio计步,基于安卓Android平台的健康计步系统APP的设计(AndroidStudio)
- 计算机专业轻薄本还是游戏本,十大精品笔记本电脑（高端轻薄本和高端游戏本）...
- 052RINEX中N文件示例说明
- 群体遗传学习笔记-基础篇
- 团队任务：第二次冲刺-第三组梦之队
- 使用OSM数据创建城市模型
- LYOI 78 小澳的葫芦
- [RK3399][Android7.1] 调试笔记 --- sdcard守护进程启动位置