HTML之一些效果的实现

最新推荐文章于 2025-03-22 01:34:36 发布

Mr_White01

最新推荐文章于 2025-03-22 01:34:36 发布

阅读量1k

点赞数 1

分类专栏： html5 文章标签： html

本文链接：https://blog.youkuaiyun.com/Mr_White01/article/details/72860176

版权

html5 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML中实现的一些视觉效果，包括阴影、圆角、线性渐变、径向渐变、倒影、过渡transition，以及CSS3的2D和3D转换。建议使用火狐浏览器查看代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.阴影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background: cyan;
                margin: 20px auto;
                /*第一个值是x轴方向的偏移量 第二个是y轴方向的偏移量  第三个值是模糊度*/
                box-shadow: 15px 15px 25px #ccc,-5px -5px 5px   #ccc;
            }
            p{
                font-family: "微软雅黑";
                color: dodgerblue;
                font-size: 30px ;
                text-align: center;
                text-shadow: 1px 1px 5px dodgerblue;
            }
        </style>
    </head>
    <body>
        <div></div>
        <p>测试阴影效果</p>
    </body>
</html>

2.圆角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background: cadetblue;
                margin: 50px auto;
            }
            div:nth-child(1){
                border-radius:20px;
            }
            div:nth-child(2){
                border-radius: 100px;
            }
            div:nth-child(3){
                border-top-left-radius: 100px;
                border-bottom-right-radius: 100px;
            }
            div:nth-child(4){
                border-top-left-radius: 100px;
                border-bottom-right-radius: 100px;
                border-bottom-left-radius: 100px;
            }
            div:nth-child(5){
                height: 100px;
                border-radius:50% ;
            }
            div:nth-child(6){
                width: 0;
                height: 0;
                background: white;
                border: 100px solid yellow;
                border-radius: 100px;
                border-right: 100px solid transparent;
                /*transparent透明*/
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

3.线性界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                background: red;
                /*设置开始和结束的颜色*/
                background-image: linear-gradient(red,blue);
                /*设置具体渐变的方向*/
                background-image: linear-gradient(to right,red,blue);
                /*向右上角渐变*/
                background-image: linear-gradient(to top right,red,blue);
                /*设置一个角度  0deg是从下到上 90deg是从左到右  180deg是从上到下*/
                background-image:linear-gradient(45deg,red,blue);
                /*渐变过程中设置多个颜色*/
                background-image: linear-gradient(to right,red,cyan,rgb(255,255,0));
                /*在渐变过程可以为某个颜色设置百分比*/
                background-image: linear-gradient(to right,red 10%,blue 40%,green 50%);
                /*特殊手法*/
                background-image: linear-gradient(to right,red 10%, blue 15%,blue 85%, red 15%);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

4.径向渐变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 300px;
                background: #ccc;
                width: 500px;
                margin: 50px auto;
                /*开始和结束颜色*/
                background-image: radial-gradient(red,blue);
                /*以圆形为基准向两边扩散*/
                background-image:radial-gradient(circle,red,blue);
                /*圆最近端*/
                background-image: radial-gradient(circle closest-side,red,blue);
                /*圆最远端*/
                background-image: radial-gradient(circle farthest-side,red,blue);
                /*以椭圆为基准向两边扩散*/
                background-image: radial-gradient(ellipse, red,blue);
                /*圆 最近角*/
                background-image: radial-gradient(circle closest-corner,red,blue);
                /*椭圆 最远角*/
                background-image: radial-gradient(ellipse farthest-corner,red,blue,green);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

5.倒影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{
                height: 300px;
                width: 550px;
                margin: 50px 550px;
                -webkit-box-reflect: left 0px linear-gradient( to left,rgba(255,0,0,0.1),rgba(255,0,0,1));
                /*倒影的位置*/
                /*间隔的距离*/
                /*倒影的渐变*/
            }
        </style>
    </head>
    <body>
        <img src="img/mp33341098_1443159964766_1_th.jpeg"/>
    </body>
</html>

6.过度transition

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                font-family: "微软雅黑";
                font-size: 50px;
                width: 200px;
                height: 200px;
                background: dodgerblue;
                /*transition:background-color 4s linear,padding 4s linear;*/
                transition: all 2s linear;
                /*linear 匀速的意思*/
                /*ease:逐渐慢下来
                 ease-in：由慢到快
                 ease-out：由快到慢
                 ease-in-out：先慢后快*/
            }
            .box:hover{
                background: blueviolet;
                border-radius: 50%;
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box" style=" text-align: center;">
            很奇怪的发现
        </div>
    </body>
</html>

7.css3-2d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background: dodgerblue;
                margin: 20px;
                display: inline-block;
                line-height: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>文字</div>未变身<div>文字</div><br />

        <div>文字</div>
        旋转30度
        <div style="transform: rotate(30deg);">文字</div><br />

        <div>文字</div>平移
        <div style="transform: translate(200px,80px);">文字</div><br />

        <div>文字</div>缩放
        <div style="transform: scale(2.1,0.5);">文字</div><br />

        <div>文字</div>倾斜
        <div style="transform: skew(45deg);">文字</div><br />

        <div style="transform: skew(45deg);">
            <span style="  display: block; transform: skew(-45deg) ;">文字</span>
        </div><br />

        <div style="transform: skew(45deg);">
            <span style=" float: right  ;">文字</span>
        </div><br />
    </body>
</html>

8.css3-3d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background: dodgerblue;
                font-size: 50px;
                font-family: "微软雅黑";
                line-height: 200px;
                margin: 20px auto;
                transition: all 1s;
                border-radius: 50%;
                box-shadow: 15px 15px 15px #ccc;
            }
            .a:hover{
                transform: rotateX(360deg);
            }
            .b:hover{
                transform: rotateY(360deg);
            }
            .c:hover{
                transform: rotateZ(360deg);
            }
            .d:hover{
                transform: scaleX(2);
            }
            .e:hover{
                transform: scaleY(2);

            }
            .f:hover{
                transform: scale(2,2);
                background: blueviolet;
            }
            .g:hover{
                transform: translateX(100px);
            }
            .h:hover{
                transform: translateY(100px);
                background: blueviolet;
            }
            .i:hover{
                transform: translate(100px,-100px);
                background: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="a">rotateX</div>
        <div class="b">rotateY</div>
        <div class="c">rotateZ</div>
        <div class="d">scaleX</div>
        <div class="e">scaleY</div>
        <div class="warp">
            <div class="f">scaleZ</div>
        </div>
        <div class="g">translateX</div>
        <div class="h">translateY</div>
        <div class="warp">
            <div class="i">translateZ</div>
        </div>

    </body>
</html>