html5 盒子阴影效果,CSS3 带阴影效果的3D盒子效果
CSS
语言:
CSSSCSS
确定
.cube {
position: relative;
width: 3em;
height: 3em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube__side {
position: absolute;
top: 0;
left: 0;
width: 3em;
height: 3em;
background: #111;
opacity: 0.2;
}
.cube__side--top {
-webkit-transform: rotateX(-90deg) translate3d(0, 1.5em, -1.5em);
transform: rotateX(-90deg) translate3d(0, 1.5em, -1.5em);
}
.cube__side--right {
-webkit-transform: rotateY(90deg) translate3d(1.5em, 0, 1.5em);
transform: rotateY(90deg) translate3d(1.5em, 0, 1.5em);
}
.cube__side--back {
-webkit-transform: translate3d(0, 0, -3em);
transform: translate3d(0, 0, -3em);
}
.cube__side--left {
-webkit-transform: rotateY(-90deg) translate3d(-1.5em, 0, 1.5em);
transform: rotateY(-90deg) translate3d(-1.5em, 0, 1.5em);
}
.cube__side--bottom {
-webkit-transform: rotateX(90deg) translate3d(0, -1.5em, -1.5em);
transform: rotateX(90deg) translate3d(0, -1.5em, -1.5em);
}
/**/
.box {
position: relative;
width: 6em;
height: 6em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(60deg) rotateZ(0deg);
transform: rotateX(60deg) rotateZ(0deg);
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-duration: 3000ms;
animation-duration: 3000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.box__layer {
position: relative;
width: 6em;
height: 3em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box__layer .cube {
position: absolute;
top: 0;
}
.box__layer .cube:nth-of-type(1) {
left: 0;
-webkit-transform: translate3d(0, 0, 1.5em);
transform: translate3d(0, 0, 1.5em);
}
.box__layer .cube:nth-of-type(2) {
left: 3em;
-webkit-transform: translate3d(0, 0, 1.5em);
transform: translate3d(0, 0, 1.5em);
}
.box__layer .cube:nth-of-type(3) {
left: 0;
-webkit-transform: translate3d(0, 0, -1.5em);
transform: translate3d(0, 0, -1.5em);
}
.box__layer .cube:nth-of-type(4) {
left: 3em;
-webkit-transform: translate3d(0, 0, -1.5em);
transform: translate3d(0, 0, -1.5em);
}
.box__shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(0.8em);
filter: blur(0.8em);
background: black;
-webkit-animation-name: shadow;
animation-name: shadow;
-webkit-animation-duration: 3000ms;
animation-duration: 3000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/**/
@-webkit-keyframes move {
0% {
-webkit-transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);
transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);
}
50% {
-webkit-transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);
transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);
}
100% {
-webkit-transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);
transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);
}
}
@keyframes move {
0% {
-webkit-transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);
transform: rotateX(60deg) rotateZ(0deg) translateZ(3em);
}
50% {
-webkit-transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);
transform: rotateX(60deg) rotateZ(-180deg) translateZ(1.5em);
}
100% {
-webkit-transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);
transform: rotateX(60deg) rotateZ(-360deg) translateZ(3em);
}
}
@-webkit-keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: translateZ(-12em) scale(0.8, 0.8);
transform: translateZ(-12em) scale(0.8, 0.8);
}
50% {
opacity: 0.3;
-webkit-transform: translateZ(-10.5em) scale(1, 1);
transform: translateZ(-10.5em) scale(1, 1);
}
100% {
opacity: 0.2;
-webkit-transform: translateZ(-12em) scale(0.8, 0.8);
transform: translateZ(-12em) scale(0.8, 0.8);
}
}
@keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: translateZ(-12em) scale(0.8, 0.8);
transform: translateZ(-12em) scale(0.8, 0.8);
}
50% {
opacity: 0.3;
-webkit-transform: translateZ(-10.5em) scale(1, 1);
transform: translateZ(-10.5em) scale(1, 1);
}
100% {
opacity: 0.2;
-webkit-transform: translateZ(-12em) scale(0.8, 0.8);
transform: translateZ(-12em) scale(0.8, 0.8);
}
}
/**/
body {
-webkit-perspective: 12em;
perspective: 12em;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
/**/
html,
body {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F5F5F5;
overflow: hidden;
}
html5 盒子阴影效果,CSS3 带阴影效果的3D盒子效果相关推荐
- 在HTML中计算立体盒子面积,CSS3之设计动态立体盒子
CSS3设计3D效果图 使用到CSS3中的变形.缩放.倾斜. 只写了兼容Gecto的.发张图片鼓励自己 .cube { position:fixed; left:50%; top:12px; } .c ...
- html 图片选中效果,使用html5 svg和css3制作神奇的图片hover效果
如果你曾经访问过新版的Christmas Experiments网站,那么你一定被网站上的日历效果所吸引.今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果.思路是用svg创建一 ...
- css怎么设置图片卷角效果,CSS3 带分隔线卷角贴纸效果
CSS 语言: CSSSCSS 确定 body { padding-top: 2.5em; background-color: #666; color: #333; font-size: 84%; f ...
- php3d按钮,css3实现3D按钮效果的文章推荐
使用css3代码来制作3D按钮效果,这是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各非常不错,因为很多效果在PS中制作是容易,特别对于设计师来说更容易,但对于一名cod ...
- html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
- html盒子阴影效果,CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示. CSS3定义了两种 ...
- html5 盒子阴影效果,如何制作平滑的“box-shadow”盒子阴影动画效果
在我们制作box-shadow属性的动画的时候,每一帧动画都会引起浏览器的重绘操作,严重影响页面的性能.我们有什么办法可以解决动画box-shadow属性时页面的性能问题呢?答案是:没有!但是我们可以 ...
- html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
- 用html5做立体盒子,css3制作3d盒子
本文首发于我的博客,这是我的github,欢迎star. 一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下,再写一些和盒子互动的操作.这里是要做的效果 ...
最新文章
- MySql UNIX_TIMESTAMP和FROM_UNIXTIME函数讲解
- c语言不允许对数组的大小做动态定义,数组,C语言程序设计课件,与中南大学出版社教材相配套.ppt...
- 贷款被拒,因为你的手机有问题
- 用servlet设计OA管理系统时遇到问题
- 【图像处理】——图像质量评价指标信噪比(PSNR)和结构相似性(SSIM)(含原理和Python代码)
- leetcode 303. 区域和检索 - 数组不可变
- 漫步数理统计十六——变换
- ASP.NET核心之路微服务第03部分:Identity
- Linux操作Oracle(5)——Oracle11g 卸载OPatch安装补丁的方法【rollback已安装的补丁】及报错问题解决
- Silverlight的诸多效果(小鸟飞,白云走,气球飘,图片展示)附源码
- ylbtech-LanguageSamples-Indexers(索引器)
- [Windows 驱动]-Windows 安装好后没有驱动怎么办捏?
- 协议——UART(RS232)
- 台式电脑锁定计算机,电脑锁住了怎么解锁
- JS JQUERY获取两个时间相差几个月
- Halcon 错误 提示 2021 System clock has been set back 解决方法
- python笔记2—day2
- 如何在网页中添加 GitHub Corners
- win10鼠标不受控制乱动_Win10到底藏有多少好东西?这些功能少为人知,却都让人无法拒绝...
- 毕业之后从事前端工作月薪大概多少?
热门文章
- 中国企业全球领导力的五大缺失
- json字符串导入MySQL_json字符串存入数据库
- 3dsmax 里”编辑网格“与”编辑多边形“的区别
- 2018 CodeM资格赛 世界杯
- requests接口测试
- 图片转文字工具怎样进行批量识别?
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
- 这么强大的自学神器,省几万培训费,限额免费学!
- AG6201 (HDMI 转 VGA)内置MCU音频DAC
- 点灯游戏原生JS实现与jQuery实现