程序员经验分享-hwhale

HTML+CSS炫酷效果（小伙伴赶紧收藏起来吧）

2023-11-15

制作不易（点赞加关注哦）

目录

1.实现奥运徽效果

2.实现3D效果

 3.翻开葵花宝典

4.实现漂浮文字(动图）

5.手机充电特效（动态）

6.滚动时针

7.立体相册

1.实现奥运徽效果

由于图片违规，就不给老铁发了哈

亲自试试呗

HTML如下


<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="123.css">
</head>
<body>
    <div class="olympic-rings"></div>
</body>
</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代码如下：


<!DOCTYPE html>
<html lang="en">
<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>3D旋转星球模型</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="window">
        <div class="father">
            <div class="children c1"></div>
            <div class="children c2"></div>
            <div class="children c3"></div>
            <div class="children c4"></div>
            <div class="children c5"></div>
            <div class="children c6"></div>
        </div>
    </div>
    <div class="window">
        <div class="ball">
            <div class="xcircle x1"></div>
            <div class="xcircle x2"></div>
            <div class="xcircle x3"></div>
            <div class="xLine"></div>
            <div class="ycircle y1"></div>
            <div class="ycircle y2"></div>
            <div class="ycircle y3"></div>
            <!-- <div class="YLine"></div> -->
            <div class="yLine"></div>
            <div class="zcircle z1"></div>
            <div class="zcircle z2"></div>
            <div class="zcircle z3"></div>
            <!-- <div class="ZLine"></div> -->
            <div class="zLine"></div>
        </div>
    </div>
</body>
</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


<!DOCTYPE html>
<html lang="en">
<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>纯css实现翻书动画</title>
    <link rel="stylesheet" href="翻书.css">
</head>
<body>
<div class="book">
    <div class="cover">
        <span>葵花宝典</span>
    </div>
    <div class="content">
        <p>欲练此功</p>
        <p>必先自宫</p>
    </div>
</div>
</body>
</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


<!DOCTYPE html>
<html lang="en">
<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>祝福版的3D标签云动画特效</title>
  <link rel="stylesheet" href="332index.css">
</head>
<body>
<div class="container"></div>
<script src="332index.js"></script>
</body>
</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


<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="充电.css">
</head>
<body>
<div class="battery">
    <div class="cover"></div>
</div>
</body>
</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


<!DOCTYPE html>
<html lang="en">
<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>
  <link rel="stylesheet" href="时针.css">
</head>
<body>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
</div>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
  <div class="num">3</div>
  <div class="num">4</div>
  <div class="num">5</div>
  <div class="num">6</div>
  <div class="num">7</div>
  <div class="num">8</div>
  <div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
  <div class="num">3</div>
  <div class="num">4</div>
  <div class="num">5</div>
</div>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
  <div class="num">3</div>
  <div class="num">4</div>
  <div class="num">5</div>
  <div class="num">6</div>
  <div class="num">7</div>
  <div class="num">8</div>
  <div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
  <div class="num">3</div>
  <div class="num">4</div>
  <div class="num">5</div>
</div>
<div class="column">
  <div class="num">0</div>
  <div class="num">1</div>
  <div class="num">2</div>
  <div class="num">3</div>
  <div class="num">4</div>
  <div class="num">5</div>
  <div class="num">6</div>
  <div class="num">7</div>
  <div class="num">8</div>
  <div class="num">9</div>
</div>
<script src="时针.js"></script>
</body>
</html>
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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>立体相册</title>
    <link rel="stylesheet" href="相册.css">
</head>

<body>
<div id="react">
    <div class="out_frount">
        <img src="img/f1.jpg" class="out_pic">
    </div>
    <div class="out_back">
        <img src="img/f2.jpg" class="out_pic">
    </div>
    <div class="out_left">
        <img src="img/f3.jpg" class="out_pic">
    </div>
    <div class="out_right">
        <img src="img/f4.jpg" class="out_pic">
    </div>
    <div class="out_top">
        <img src="img/f5.jpg" class="out_pic">
    </div>
    <div class="out_bottom">
        <img src="img/f6.jpg" class="out_pic">
    </div>
    <span class="in_frount">
        <img src="img/f7.jpg" class="in_pic">
    </span>
    <span class="in_back">
        <img src="img/f8.jpg" class="in_pic">
    </span>
    <span class="in_left">
        <img src="img/f9.jpg" class="in_pic">
    </span>
    <span class="in_right">
        <img src="img/f10.jpg" class="in_pic">
    </span>
    <span class="in_top">
        <img src="img/f11.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
        <img src="img/f12.jpg" class="in_pic">
    </span>
</div>
</body>
</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);
}

老铁三连哦

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Web

炫酷效果

css

html

CSS3

HTML+CSS炫酷效果（小伙伴赶紧收藏起来吧） 的相关文章

  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人

  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载！仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr

  • 尝试使用 php 发送 POST 请求，无论我做什么，我都会收到“HTTP ERROR 500”

    为了发出 HTTP 请求 有人建议我尝试使用 PHP 并给了我一段代码 url https example com dashboard api data array to gt PHONE NUMBER from gt SENDER ID

  • 设置浏览器窗口最小化的最小尺寸限制？

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用

  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads

  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli

  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org

  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任

  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly

  • 防止浮动换行，直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在

  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案？

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01

  • 如何使用canvas.toDataURL()将画布保存为图像？

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J

  • 防止用户在下拉菜单中选择默认值

    我试图阻止用户选择默认的下拉菜单选项 有没有办法在下拉菜单选项中添加文本而不是值 我的代码

  • HTML2canvas 和 Canvas2image，下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3

  • 在d3.js中将2D形状转换为3D，并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

  • 如何获取 UIWebView 中元素的位置？

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we

  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

  • Java通过正则表达式获取域名

    由于 url getHost 获取域名会有漏洞 会获取不完整 因此通过正则表达式获取域名 上代码 String url http www linuxidc com entry 4545 0 Pattern p Pattern compile

  • Nginx 第三方健康检测模块的使用

    ngx http upstream check module 模块 模块开源地址 https github com yaoweibin nginx upstream check module 官网介绍 http tengine taobao

  • linux 网络

    网络基础 协议的概念 什么是协议 从应用的角度出发 协议可理解为 规则 是数据传输和数据的解释的规则 假设 A B双方欲传输文件 规定 第一次 传输文件名 接收方接收到文件名 应答OK给传输方 第二次 发送文件的尺寸 接收方接收到该数据再次

  • tf好朋友之matplotlib的使用——subplot分格显示

    tf好朋友之matplotlib的使用 subplot分格显示 分格显示的方法 利用plt subplot2grid进行分格显示 利用gridspec GridSpec进行分格显示 应用示例 在学习matlab的时候 图像是可以分格显示的

  • 1032. 挖掘机技术哪家强(20)

    1032 挖掘机技术哪家强 20 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN Yue 为了用事实说明挖掘机技术到底哪家强 PAT组织了一场挖掘机技能大赛 现请你

  • maven仓库中_remote.repositories的作用

    首先直接给结论 remote repositories的作用是当maven本地仓库缓存了jar pom的情况下修改了maven的配置文件 settings xml 后依然会去远程仓库获取 以org slf4j slf4j api 1 5 6

  • 科创板、香港主板、纳斯达克三地部门上市条件和要求

    转自 https zhuanlan zhihu com p 69144513 科创板 香港主板 纳斯达克三地部门上市条件和要求 发布于 2019 06 14

  • 一、创建型模式：工厂方法模式（Factory Method）

    请MM去麦当劳吃汉堡 不同的MM有不同的口味 要每个都记住是一件烦人的事情 我一般采用Factory Method模式 带着MM到服务员那儿 说 要一个汉堡 具体要什么样的汉堡呢 让MM直接跟服务员说就行了 定义 核心工厂类不再负责所有产品

  • MySQL-多表关联

    多表关联 多张数据表之间是可以有一定的关联关系 这种关联关系可以通过外键约束实现 多表的分类 一对一 一对多 多对多 一对一 一张表对应另一张表 适用场景 人和身份证 一个人只能有一个身份证 一个身份证只能对应一个人 建表原则 在任意一个表

  • python爬虫实战练手——————淘宝网站的爬取

    python爬虫是很好的数据分析手段 可以进行爬虫程序来进行爬取网站 下面是淘宝的爬取 淘宝搜索书包 然后得到以下的界面 注意到下面的分页 可以通过进行分页的改变来进行多页数据的爬取 爬取多页 这里用到了和重要的re库 也就是正则表达式库

  • Windows10下Linux子系统Ubuntu使用教程（8）——升级WSL2，及解决遇到的问题

    WSL 2 是 WSL 中体系结构的新版本 它更改 Linux 发行版与 Windows 交互的方式 WSL 2 的主要目标是提高文件系统性能并增加系统调用的完全兼容性 每个 Linux 发行版都可以作为 WSL 1 或 WSL 2 发行版

  • vue 获取服务端base64位图片之后的处理

    目录 Base64是什么 Base64可以在Url中传输吗 Base64是加密算法么 Base64的应用场景有哪些 Base64的优点 Base64的缺点 关于vue中img无法展示base64位图片的原因分析 Base64是什么 Base

  • CSS-选择器的基本用法

    目录 一 CSS的分类 1 行内样式 2 内部样式 3 外部样式 二 选择器是什么 三 选择器具体种类 1 类选择器 2 标签选择器 3 ID选择器 4 通配符选择器 一 CSS的分类 1 行内样式 通过 style 属性 来指定某个标签的

  • Java实现Token的生成与验证

    二 基于JWT的token认证实现 JWT JSON Web Token 其实token就是一段字符串 由三部分组成 Header Payload Signature 1 引入依赖

  • 爬虫之简单js逆向

    本次js逆向没有存在代码混淆 所以还是比较简单的 重要的就是js逆向的思路 目标网站https notice qb com detail noticeId 215让我们开始吧 进入网站后按F12 查看DOC中的 可以看出该网页一部分内容是异

  • vue3解读—reactivity响应式实现

    前言 Vue3 中引入了proxy进行数据劫持 而effect是响应式系统的核心 而响应式系统又是 vue3 中的核心 所以vue3的解读要从 effect 开始讲起 1 reactivity和effect的使用 目前vue3的各个模块都可

  • 蓝桥杯：基础练习 特殊的数字（java实现）

    问题描述 153是一个非常特殊的数 它等于它的每位数字的立方和 即153 111 555 333 编程求所有满足这种条件的三位十进制数 输出格式 按从小到大的顺序输出满足条件的三位十进制数 每个数占一行 public class Main

  • 2014阿里巴巴9月14北京校园招聘笔试及参考答案

    form http blog csdn net lingfengtengfei article details 12344511 from http blog csdn net lingfengtengfei article details

  • java实现根据pdf文件模板生成pdf文件

    一 如何制作pdf模板 1 首先创建template doc 2 根据doc文件制作pdf模板 3 将doc文件输出为pdf 文件 gt 输出为pdf 4 输出的pdf文件 5 使用Adobe Acrobat DC打开template pd

  • HTML+CSS炫酷效果（小伙伴赶紧收藏起来吧）

    制作不易 点赞加关注哦 目录 1 实现奥运徽效果 2 实现3D效果 3 翻开葵花宝典 4 实现漂浮文字 动图 5 手机充电特效 动态 6 滚动时针 7 立体相册 1 实现奥运徽效果 由于图片违规 就不给老铁发了哈 亲自试试呗 HTML如下

热门标签