CSS3简单画出3d图形

　1、气球

2、泳圈

1、2两图实现代码分别如下：

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>气球特效</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    *{margin:0;padding: 0;}

    body{position: relative; overflow: hidden; background: #ccc;}

    .balloon{

        display: inline-block;

        position: absolute;

        width: 160px;

        height: 160px;

        background: #faf9f9;

        border-radius: 160px 160px 64px 160px;

        transform:rotate(45deg);

        /*        盒子阴影  纵向移动 横向移动 羽化 半径  颜色  内外切换*/

        box-shadow:8px 8px 80px 8px #873940 inset;

    }

    .balloon::after{

        position: absolute;

        bottom: 0;

        right: 0;

        content:'';

        width: 0;

        height: 0;

        border:8px solid transparent;

        border-right-color:#873940;

        transform: rotate(45deg);

        border-radius: 16px;

    }

</style>

</head>

<body>

    <div class="balloon"></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>游泳圈静态</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    *{margin:0;padding: 0;}

    body{position: relative; overflow: hidden; background: #ccc;}

    .youyongquan{

        position: relative;

        width: 200px;

        height: 160px;

        padding: 50px 50px 50px 50px;

        margin:0 auto;

        background: #faf9f9;

        border-radius: 50% 50% 50% 50%;

        box-shadow:8px 8px 80px 8px #873940 inset;

    }

    .quan2{

        width: 160px;

        height: 120px;

        margin:0 auto;

        background: #faf9f9;

        border-radius: 50% 50% 50% 50%;

        box-shadow:8px 8px 80px 8px #873940;

    }

</style>

</head>

<body>

    <div class="youyongquan">

        <div class="quan2"></div>

    </div>

</body>

</html>

巴特西

CSS3简单画出3d图形

最新文章

热门文章