HTML之一些效果的实现

来源：互联网发布：柯林斯知乎编辑：程序博客网时间：2024/06/05 16:24

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>

具体代码实现的现象，请用火狐浏览器打开查看。

阅读全文

0 0