最近逛B站看到不少大神使用CSS3动画做了不少炫酷效果，在模仿的过程中也学到了一些东西。
一、2D涟漪效果 https://codepen.io/daless14/pen/ELFgj
这个实现起来还是比较简单的，里面有有三个技术分别是： 箱阴影形如： box-shadow: 10px 10px 5px #888888;分别控制向右偏移距离、向下偏移距离、投影清晰度和投影颜色。box-shadow属性向框元素添加一个或多个阴影效果。text-shadow属性向文本设置阴影。与箱音影用法类似，用于给文字添加阴影效果。 伪元素: “:before" 伪元素可以在元素的内容前面插入新内容。":after" 伪元素可以在元素的内容之后插入新内容。使用这两个两个伪元素是为了配合语义化的实现，不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。 举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：
语义化
动画的使用
使用动画需要设置的一些属性值
通过name设置动画的效果，也可以使用 from{} to{} 实现
二、3d立方体旋转和展开 https://www.bilibili.com/video/av49984936 效果超级炫酷，哈哈哈，想具体学的需要自己看一下链接到的大神视频。或者copy我精简过的代码，关于rotate的详细讲解https://jingyan.baidu.com/article/d621e8da0aa7192865913f05.html
css部分，部分注释用于解释代码作用，不合法，直接复制无法使用，需要记得自己手动去掉呦，这里会加粗提醒。
*{
margin: 0;
padding: 0;
}
//强制所有对象内外边距为0，清除dev之间的边距
body{
background-color: greenyellow;
}
.wrap{
height: 150px;
width: 150px;
position: absolute;
top:50%;
left: 50%;
//是组件放置于网页正中间
text-align: center;
//文字放置于组件中间
transform: rotateY(0deg) rotateX(45deg) rotateZ(-45deg) ;
transform-style: preserve-3d;
//使用css3d动画
padding: 0px;
animation:al 6s linear infinite;
}
.side{
height: 100%;
width: 100%;
position: absolute;
border: 1px solid red;
background-color: #ffffff45;
box-sizing: border-box;
}
.wrap .up{
transform:rotateX(90deg) translateZ(75px)
}
.wrap .down{
transform:rotateX(-90deg) translateZ(75px)
}
.wrap .back{
transform:rotateY(180deg) translateZ(75px)
}
.wrap .fornt{
transform:rotateY(0deg) translateZ(75px)
}
.wrap .left{
transform:rotateY(90deg) translateZ(75px)
}
.wrap .right{
transform:rotateY(-90deg) translateZ(75px)
}
@keyframes al{
from{
transform: rotateY(0deg) rotateX(45deg) rotateZ(-45deg) ;
}
to{
transform: rotateY(360deg) rotateX(45deg) rotateZ(-45deg) ;
}
}
.wrap:hover{
animation-play-state: paused;
}
js部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3d正方形旋转</title>
<link rel="stylesheet" href="../css/cube.css"/>
</head>
<body>
<embed src="../img/magic.mp3" hidden="true" autostart="true" />
<div class="wrap">
<div class="side fornt">
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side back">
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side left">
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side right">13921752308
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side up">
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side down">
<h1>李宇春</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
</body>
</html>
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数.
例：animation:myfirst 6s linear infinite;
然后还要一个是三个立方体展开的demo,可以直接复制运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3d正方形旋转</title>
<link rel="stylesheet" href="../css/cube2.css"/>
</head>
<body>
<div class="wrap">
<div class="side fornt">
<h1>正面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side right">
<h1>左面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side up">
<h1>上面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
</div>
<div class="wrap wrap2">
<div class="side fornt">
<h1>正面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side right">
<h1>左面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side up">
<h1>上面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
</div>
<div class="wrap wrap3">
<div class="side fornt">
<h1>正面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side right">
<h1>左面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
<div class="side up">
<h1>上面</h1>
<p>愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞，愿你善其身，愿你遇良人。</p>
</div>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
body{
background-color: greenyellow;
}
.wrap{
height: 150px;
width: 150px;
position: absolute;
top:20%;
left: 40%;
text-align: center;
transform: rotateY(-45deg) rotateX(-20deg) rotateZ(20deg) ;
transform-style: preserve-3d;
padding: 0px;
}
.wrap2{
transform: rotateY(-45deg) rotateX(-20deg) rotateZ(20deg) translate(150px,150px) ;
}
.wrap3{
transform: rotateY(-45deg) rotateX(-20deg) rotateZ(20deg) translate(150px,-150px) ;
}
.side{
height: 100%;
width: 100%;
position: absolute;
border: 1px solid red;
background-color: #ffffffc7;
box-sizing: border-box;
transition: transform .8s ease;
}
.wrap .fornt{
transform:rotateY(0deg) translateZ(75px)
}
.wrap .right{
transform:rotateY(90deg) translateZ(75px)
}
.wrap .up{
transform:rotateX(90deg) translateZ(75px)
}
.wrap .right:hover{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(150px,0) translateZ(75px);
}
.wrap .up:hover{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0,-150px) translateZ(75px);
}
网友评论