用CSS3动画设计一个盒子

最新推荐文章于 2022-02-08 19:30:00 发布
最新推荐文章于 2022-02-08 19:30:00 发布
阅读量527 收藏 2
点赞数 1
文章标签： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Asatoga/article/details/79354405
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>明镜止水</title>
<style type="text/css">
.cube {
position: fixed;
left: 50%;
top:12px;
}
.cube.one {
top: 200px;
left: 50%;
margin-left: -200px;
}
.rightFace, .leftFace, .topFace div {
padding: 0px;
width: 180px;
height: 180px;
border: solid 1px #ddd;
}
.cube img {
width: 180px;
height: 180px;
}
.rightFace, .leftFace, .topFace { position: absolute;}
.cube:hover .rightFace, .cube:hover .leftFace, .cube:hover .topFace div { background-color: #ffc;}
.cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover .topFace:hover div { background-color: #ffa;}
.leftFace {
-webkit-transform: skew(0deg,30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skew(0deg,-30deg);
background-color: #ddd;
left: 180px;
}
.topFace div {
-webkit-transform: skew(0deg,-30deg) scale(1,1.16);
background-color: #eee;
font-size: 0.862em;
}
.topFace {
-webkit-transform: rotate(60deg);
top: -142px;
left: 89px;
}
.cube.{ -webkit-transition: -webkit-transform 1s linear;}
.cube:hover { -webkit-transform: translate(202px,115px);}
</style>
</head>
<body>
<div class="cube one">
<div class="topFace">
<div>
<img src="../images/luoma.jpg"/>
</div>
</div>
<div class="leftFace">
<div>
<img src="../images/MEico.jpg"/>
</div>
</div>
<div class="rightFace">
<div>
<img src="../images/罗马.jpg"/>
</div>
</div>
</div>
</body>

</html>

效果如下


夜行旅人
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3实现swap交换动画
09-24
主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下
CSS进阶-盒子与动画
极正君
10-30 409
CSS3动画 - 优秀书籍推荐 + 优秀文章推荐
CSS(四)——三个盒子的动画效果
rjlmylover_zyw的博客
12-04 587
三个盒子的动画效果 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style>
css设置盒子动画,CSS3 transition动画 animation动画
weixin_33895554的博客
08-03 1059
CSS3 transition动画transition-property 设置过渡的属性，比如：width height background-colortransition-duration 设置过渡的时间，比如：1s 500mstransition-timing-function 设置过渡的运动方式linear 匀速ease 开始和结束慢速ease-in 开始是慢速ease-out 结束时慢速...
纯css实现3D立方体
hhzzcc_的博客
04-04 3444
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body,html{ margin: 0; } body{ display: flex; ...
CSS盒子模型
热门推荐
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
纯CSS3人物行走动画 逼真炫酷CSS3动画
04-16
解压密码：RJ4587 CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人物行走，而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个CSS3人物行走动画的基础，我们就可以更...
基于CSS3和GSAP的超酷盒子爆炸动画特效
12-13
这是一款使用GSAP的TweenMax.js和CSS3来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现SVG Logo，整个效果非常连贯逼真。
CSS3点击按钮实现背景渐变动画效果
12-13
效果图如下： 实例代码如下： 复制代码代码如下:<...css3给按钮添加背景渐变动画</title><!–@author：SM @email:[email protected]@desc： css3给按钮添加背景渐变动画–><style type=”t
CSS3圣诞礼物盒打开动画特效
07-24
CSS3圣诞礼物盒打开动画特效是一款纯CSS3绘制的圣诞礼物盒打开小熊出现动画特效。
那些年我们用css3实现的打开盒子的3d动画
车联网开发的博客
12-01 2179
本片博客意在练习使用css3的新增特性实现一些炫酷的特效 特效如图 代码如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"
html5css3动画小小demo旋转的盒子
GS2016的博客
02-01 1661
旋转的盒子 img{ animation:go 2s linear infinite; display:block; margin:100px auto; } @keyframes go{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg
css 3D盒子动画
chenqiong1991的博客
01-22 1037
翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。 本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。 主要通过::before伪...
CSS3盒子相关样式
sleepwalker_1992的专栏
05-12 954
盒子的类型，使用display属性来定义盒的类型，总体来说，CSS中的盒子分为block类型与inline类型。 display:inline; display:block; display:inline-block; 可以设置宽 display: 把div变成了列表 对盒子中容纳不下的内容的显示，可以使用overflow属性来指定对盒子中容纳不下的内容的显示方法。 overf...
css动画属性实现3d效果立体盒子效果
心灵刈博
07-30 2922
前言 今天总结了css动画属性相关知识，也写了一些前言，现在不说不多bb了。主要是为对先前总结的知识（css动画属性大集合），来个小demo来加深印象。 主要知识点 1.在祖先元素设置井深属性-perspective 2.为需要实现3d变形转换的元素设置3d场景：transform-style: preserve-3d; 效果图如下： 实现代码如下：
css3实现盒子运动，由上向下移动200px
this_name_true的博客
01-08 9123
效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Text3盒子运动&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0;
css动画-3d旋转盒子
zhang_ntmare的博客
11-07 3180
left:0; right:0; top:0; bottom:0; margin：auto;会使text居中，如果text没有宽高，则会继承父集的宽高。适合body 内的遮罩 3d动画记得设置3d，transform-style: preserve-3d; 重置3d中心，transform-origin:center center;
CSS 盒子
William Lin 的专栏
12-10 609
  这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助CSS 中有个重要的概念，就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。 盒子里由外至里依次是：·       marg
css33D盒子动画（盒子套盒子）
ssh6666的博客
03-15 762
css3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 关键帧的定义 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 @keyframes mymove{ from{初始状态属性...
用css做一个小球融入大盒子动画效果
最新发布
06-07
好的，以下是一个简单的实现方法： HTML部分： ```html <div class="container"> <div class="ball"></div> </div> ``` CSS部分： ```css .container { width: 500px; height: 500px; background-color: #f2f2f2; position: relative; } .ball { width: 50px; height: 50px; background-color: #ff9900; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ball-in 2s ease-in-out forwards; } @keyframes ball-in { 0% { transform: translate(-50%, -50%) scale(0.2); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } ``` 在这个例子中，我们使用了 CSS3 动画来实现小球缓慢地融入大盒子的效果。关键是使用了 `transform` 属性，将小球的初始大小设置为 0.2，然后在动画中逐渐放大到 1.2，最后回到 1 的大小，使得小球看起来像是逐渐融入了大盒子中。同时，我们使用了 `forwards` 属性来保持动画完成后的状态，即小球停留在大盒子中央。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值