欲练此功
必先自宫
HTML+CSS炫酷效果（小伙伴赶紧收藏起来吧）
制作不易（点赞加关注哦）
目录
1.实现奥运徽效果
2.实现3D效果
3.翻开葵花宝典
4.实现漂浮文字(动图）
5.手机充电特效（动态）
6.滚动时针
7.立体相册
1.实现奥运徽效果
由于图片违规，就不给老铁发了哈
亲自试试呗
HTML如下
奥运五环
CSS如下
body{
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 最小高度 */
min-height: 100vh;
/* 视距 眼睛到屏幕的距离 */
perspective: 1000px;
}
.olympic-rings{
width: 800px;
min-width: 800px;
height: 370px;
min-height: 370px;
/* css3径向渐变radial-gradient */
/* circle 圆 */
/* transparent 透明 */
background-image:
radial-gradient(circle,transparent 58%,#0081c8 58%,#0081c8 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#000 58%,#000 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#EE334E 58%,#EE334E 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#FCB131 58%,#FCB131 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#00A651 58%,#00A651 70%,transparent 70%);
/* 背景图像起始位置 */
background-position:
0% 0%,
50% 0%,
100% 0%,
25% 100%,
75% 100%;
/* 背景图片不平铺 */
background-repeat: no-repeat;
background-size: 250px 250px;
/* 相对定位 */
position: relative;
animation: rotate 5s ease-in-out infinite;
}
@keyframes rotate{
0%,100%{
transform: rotateY(30deg);
}
50%{
transform: rotateY(-30deg);
}
}
/* inherit使用指定给父元素的所有值 */
.olympic-rings::before,
.olympic-rings::after{
content: "";
display: block;
width: inherit;
height: inherit;
/* circle 圆 */
/* transparent 透明 */
background-image:
radial-gradient(circle,transparent 58%,#FCB131 58%,#FCB131 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#00A651 58%,#00A651 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#0081c8 58%,#0081c8 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#000 58%,#000 70%,transparent 70%),
radial-gradient(circle,transparent 58%,#EE334E 58%,#EE334E 70%,transparent 70%);
background-position:
25% 100%,
75% 100%,
0% 0%,
50% 0%,
100% 0%;
background-repeat: inherit;
background-size: inherit;
position: absolute;
top: 0;
left: 0;
}
/* clip-path: polygon();
clip-path裁剪
polygon 多边形
*/
.olympic-rings::before{
clip-path: polygon(33% 28%, 39% 28%, 39% 67%, 16% 67%, 16% 57%, 33% 57%);
}
.olympic-rings::after{
clip-path: polygon(68% 28%, 72% 28%, 72% 67%, 50% 67%, 50% 57%, 68% 57%);
}2.实现3D效果
HTML代码如下：
3D旋转星球模型
css代码如下
*{
padding: 0;
margin: 0;
}
body{
background: #000;
}
.window{
position: relative;
float: left;
margin: 0px 150px;
perspective: 800px;
}
.father{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transform-style:preserve-3d ;
/* 中心旋转 */
transform-origin: 50% 50% -150px;
animation: xuanz 5s linear 1s infinite;
}
.children{
position: absolute;
width: 100%;
height: 100%;
/* opacity: 0.5s; */
opacity: 0.5;
}
.c1{
background: red;
transform-origin: bottom;
transform: rotateX(90deg);
}
.c2{
background: white;
}
.c3{
background: green;
transform: translateZ(-300px);
}
.c4{
transform-origin: top;
background: orange;
transform: rotateX(-90deg);
}
.c5{
background: blue;
/* transform: rotateX(90deg); */
transform: rotateY(90deg);
transform-origin: left;
}
.c6{
transform: rotateY(-90deg);
background: gray;
transform-origin: right;
}
@keyframes xuanz{
0% {
transform: rotateY(0deg);
}
20% {
transform: rotateY(90deg);
}
40% {
transform: rotateY(180deg);
}
80% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
.ball {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transform-style: preserve-3d;
animation: gundong 5s linear 1s infinite;
}
.xcircle,.ycircle,.zcircle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 50%;
transition:all 1s ease;
}
.x1,.x3,.y1,.y3,.z1,.z3 {
width: 87.5%;
height: 87.5%;
margin: 6.25% auto;
}
.x2,.y2,.z2 {
width: 100%;
height: 100%;
}
.x2,.xLine{
border: solid 2px blue;
transform: rotateX(90deg);
}
/* .y2,.yLine{
border: solid 2px orange;
transform: rotateY(90deg);
} */
.z2,.zLine{
/* border: solid 2px red; */
/* transform: rotateZ(90deg); */
border: solid 2px orange;
transform: rotateY(90deg);
}
.ycircle,.yLine {
border: solid 2px red;
}
.yLine {
transform: rotateZ(90deg);
}
.x1{
border: solid 2px blue;
transform: rotateX(90deg) translateZ(75px);
}
.x3{
border: solid 2px blue;
transform: rotateX(90deg) translateZ(-75px);
}
.z1{
border: solid 2px orange;
/* transform: rotateX(90deg) translateZ(75px); */
transform: rotateY(90deg) translateZ(75px);
}
.z3{
border: solid 2px orange;
/* transform: rotateX(90deg) translateZ(-75px); */
transform: rotateY(90deg) translateZ(-75px);
}
.y1{
border: solid 2px red;
transform: translateZ(75px);
}
.y3{
border: solid 2px red;
transform: translateZ(-75px);
}
.xLine,.yLine,.zLine{
position: absolute;
width: 100%;
top: 50%;
}
@keyframes gundong{
0%{
transform: rotateY(0deg) rotateX(0deg);
}
20%{
transform: rotateY(90deg) rotateX(90deg);
}
40%{
transform: rotateY(180deg) rotateX(180deg);
}
80%{
transform: rotateY(270deg) rotateX(270deg);
}
100%{
transform: rotateY(360deg) rotateX(360deg);
}
}3.翻开葵花宝典
实现代码
HTML
纯css实现翻书动画
葵花宝典
CSS
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%的窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background: #dfb88e;
}
.book{
width: 300px;
height: 400px;
background-color: #fff;
/* 开启3D效果 */
transform-style: preserve-3d;
/* 设置视距 */
perspective: 2000px;
/* 设置阴影 */
box-shadow: inset 300px 0 30px rgba(0, 0, 0, 0.2),
0 10px 100px rgba(0, 0, 0, 0.3);
/* 动画过渡 */
transition: 1s;
}
/* 鼠标移入，阴影变化+旋转 */
.book:hover{
transform: rotate(-10deg);
box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.2),
0 10px 100px rgba(0, 0, 0, 0.3);
}
.book::before{
content: "";
/* 绝对定位 */
position: absolute;
left: 0;
top: -5px;
width: 100%;
height: 5px;
background-color: #0d2a50;
/* 设置旋转元素的基点位置 */
transform-origin: bottom;
/* 沿X轴倾斜-45度 */
transform: skew(-45deg);
}
.book::after{
content: "";
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 100%;
background-color: #3d5a83;
transform-origin: left;
transform: skewY(-45deg);
}
/* 封面 */
.book .cover{
width: 100%;
height: 100%;
background-color: #2a3f5c;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform-origin: left;
transition: 1s;
}
.book .cover span{
position: absolute;
right: 30px;
top: 30px;
background-color: #fff;
font-size: 40px;
font-family: "隶书";
/* 竖向文本 */
writing-mode: vertical-lr;
padding: 10px 5px 5px 5px;
/* 字间距 */
letter-spacing: 5px;
}
.book:hover .cover{
transform: rotateY(-135deg);
}
.book .content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
font-size: 40px;
font-family: "隶书";
line-height: 50px;
letter-spacing: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}4.实现漂浮文字(动图）
HTML
祝福版的3D标签云动画特效
CSS
*{
margin: 0;
padding: 0;
}
:root{
/* 自定义属性，这几个属性等会是通过js随机生成，通过var函数可对其调用 */
/* 上外边距 */
--margin-top:0;
/* 左外边距 */
--margin-left:0;
/* 动画时长 */
--animation-duration: 0s;
/* 动画延迟时间 */
--animation-delay: 0s;
}
body{
/* 100%的窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
align-items: center;
justify-content: center;
background-color: #111;
/* 溢出隐藏 */
overflow: hidden;
/* 设置视觉距离 */
perspective: 1300px;
}
div{
/* 所有div默认开启3D属性 */
transform-style: preserve-3d;
}
.word-box,
.word-box .word{
/* 绝对定位 */
position: absolute;
/* 执行动画：动画名 时长 线性的 无限次播放 */
animation: rotY 0s linear infinite;
/* 设置动画时长 */
animation-duration: var(--animation-duration);
/* 设置动画延迟 */
animation-delay: var(--animation-delay);
}
.word-box{
margin-top: var(--margin-top);
}
.word-box .word{
margin-left: var(--margin-left);
}
.word-box .word{
/* 反向动画 */
animation-duration: reverse;
}
/* 定义动画 */
@keyframes rotY{
to{
/* 1turn表示一圈 */
transform: rotateY(1turn);
}
}5.手机充电特效（动态）
实现HTML
手机充电特效
CSS
*{
/* 初始化 取消页面元素的内外边距 */
margin: 0;
padding: 0;
}
body{
/* 100%的窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
/* 相对定位 */
position: relative;
}
/* 电池 */
.battery{
width: 200px;
height: 320px;
background-color: #fff;
/* 设置圆角 */
border-radius: 10px 10px 5px 5px;
position: relative;
}
/* 电池顶部 正极 */
.battery::before{
content: "";
width: 50px;
height: 20px;
background-color: #fff;
/* 绝对定位 */
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
border-radius: 5px 5px 0 0;
}
/* 充电效果层 */
.battery::after{
content: "";
/* 绝对定位 */
position: absolute;
left: 0;
right: 0;
top: 90%;
bottom: 0;
border-radius: 10px 10px 5px 5px;
/* 渐变背景 */
background: linear-gradient(to bottom,#04e963 0%,#0bdf9f 44%,#0bdfc3 100%);
/* 执行充电动画: 动画名称 时长 线性 无限次播放 */
animation: charge 10s linear infinite;
}
/* 制作充电时的波浪效果 */
.cover{
width: 100%;
height: 100%;
border-radius: 10px 10px 5px 5px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
/* 加上一个溢出隐藏 */
overflow: hidden;
}
.cover::before{
content: "";
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.8);
position: absolute;
border-radius: 40% 30%;
left: -50%;
/* 执行动画 */
animation: coverBefore 10s linear infinite;
}
.cover::after{
content: "";
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.7);
position: absolute;
border-radius: 42% 40%;
left: -50%;
/* 执行动画 */
animation: coverAfter 10s linear infinite;
}
/* 定义动画 */
/* 充电动画 */
@keyframes charge{
0%{
top: 100%;
border-radius: 0 0 5px 5px;
/* hue-rotate是一个颜色滤镜 可以设置不同的度数来改变颜色 */
filter: hue-rotate(90deg);
}
95%{
top: 5%;
border-radius: 0 0 5px 5px;
}
100%{
top: 100%;
filter: hue-rotate(0deg);
}
}
/* 波浪1动画 */
@keyframes coverBefore{
0%{
transform: rotate(0deg);
bottom: 0%;
}
100%{
transform: rotate(360deg);
bottom: 100%;
}
}
/* 波浪2动画 */
@keyframes coverAfter{
0%{
transform: rotate(30deg);
bottom: 2%;
}
100%{
transform: rotate(360deg);
bottom: 95%;
}
}6.滚动时针
HTML
上下滚动的数字时钟
0
1
2
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
css部分CSS
/* 引入Jura字体 */
@import url("http://fonts.googleapis.com/css?family=Jura:200,300,400,500,600,700,800,900");
*{
margin: 0;
padding: 0;
}
body{
background-color: #0e141b;
color: #e0e6eb;
font-family: 'Jura';
font-weight: 300;
text-align: center;
letter-spacing: 8px;
/* 溢出隐藏 */
overflow: hidden;
}
.column,
.colon{
/* 行内元素 */
display: inline-block;
font-size: 86px;
line-height: 86px;
/* 顶部对齐 */
vertical-align: top;
}
.column{
/* 设置过渡 */
transition: 0.3s;
}
/* 冒号 */
.colon{
/* 垂直居中 (偏上一点) */
transform: translateY(calc(50vh - 55px));
/* 设置过渡 */
transition: 0.3s;
}
.colon::after{
content: ":";
}
/* 数字的默认样式 */
.num{
opacity: 0.25;
/* 设置过渡 */
transition: 0.5s;
}
/* 当前时间 (正中间的数字) */
.num.visible{
opacity: 1;
text-shadow: 1px 1px 0 #2c6299;
}
/* 邻近的 */
.num.near{
opacity: 0.35;
}
/* 远的 */
.num.far{
opacity: 0.15;
}
/* 更远的 (越远越透明) */
.num.distant{
opacity: 0.1;
}JS
// 单个数字的垂直偏移量
let size = 86;
// 把所有的.column转为数组
let columns = Array.from(document.getElementsByClassName('column'));
// 样式名数组
let class_list = ['visible', 'near', 'far', 'far', 'distant', 'distant'];
// true=24小时制，false=12小时制
let is_24_hour_clock = true;
// 获取时分秒
function getClock() {
let d = new Date();
let hour = is_24_hour_clock ? d.getHours() : d.getHours() % 12 || 12;
hour = hour < 10 ? '0' + hour : hour;
let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
return hour + '' + minute + '' + second;
}
// 获取对应的样式名称
function getClass(n,i){
return class_list.find(function(_class,class_index){
return i - class_index === n || i + class_index === n;
}) || '';
}
// 定时器，一秒执行一次
setInterval(() => {
// 获取时间
let c = getClock();
// 遍历所有.column
columns.forEach(function (ele, i) {
// 获取时分秒的每一位数，并转为整型
let n = parseInt(c[i]);
// 计算偏移量
let offset = -n * size;
// 设置每一位数的位置
ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + (size / 2) + 'px))';
// 接下来设置样式
// 将.column的子元素（.num）转为数组，并遍历它
Array.from(ele.children).forEach(function(ele2,i2){
// 设置每一位数的样式（透明度改变）
ele2.className='num '+getClass(n,i2);
})
})
}, 1000);7.立体相册
HTML
立体相册
CSS
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100%;
background:linear-gradient(lightpink 0%,greenyellow 100%);
}
#react{
width: 300px;
height:300px;
margin: 300px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .5s;
}
div .out_pic{
width:300px;
height:300px;
opacity:0.9;
}
div .in_pic{
width:200px;
height:200px;
}
#react span{
display:block;
position:absolute;
width:200px;
height:200px;
top:50px;
left:50px;
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.out_frount{
transform:translateZ(150px);
}
.out_back{
transform:translateZ(-150px);
}
.out_left{
transform:rotateY(90deg) translateZ(150px);
}
.out_right{
transform: rotateY(-90deg) translateZ(150px);
}
.out_top{
transform:rotateX(90deg) translateZ(150px);
}
.out_bottom{
transform: rotateX(-90deg) translateZ(150px);
}
.in_frount{
transform:translateZ(100px);
}
.in_back{
transform:translateZ(-100px);
}
.in_left{
transform:rotateY(90deg) translateZ(100px);
}
.in_right{
transform: rotateY(-90deg) translateZ(100px);
}
.in_top{
transform:rotateX(90deg) translateZ(100px);
}
.in_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
#react:hover .out_frount{
transform:translateZ(300px);
}
#react:hover .out_back{
transform:translateZ(-300px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(300px);
}
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(300px);
}
#react:hover .out_top{
transform:rotateX(90deg) translateZ(300px);
}
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(300px);
}
老铁三连哦