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代码如下：

 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

*{
    /* 初始化 */
    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

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);
}

老铁三连哦