CSS样式，布局，动画

最新推荐文章于 2023-01-10 10:21:07 发布
zxx_fly
最新推荐文章于 2023-01-10 10:21:07 发布
阅读量339
点赞数
分类专栏： css，动画文章标签： css 布局动画
本文链接：https://blog.csdn.net/zxx_fly/article/details/78044850
版权
css，动画专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .center {
            width: 100%;
            height: 1200px;
            float: left;

        }

        .left {
            width: 150px;
            height: 1200px;
            float: left;
            margin-left: -100%;
            background: blue;
        }

        .right {
            width: 150px;
            height: 1200px;
            float: left;
            margin-left: -150px;
            background: yellow;
        }

        .u li a {
            display: inline-block;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: green;
        }

        .u li .home {
            background: red;
        }

        .child {
            display: none;
            position: fixed;
        }

        .parent:hover .child {
            display: block;
        }

        .child li a:hover {
            background: yellow;
        }

        img {
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        }

        .angle {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-top: 30px solid red;
        }

        .dialog {
            width: 200px;
            height: 50px;
            border-radius: 7px;
            background: orange;
            position: relative;
        }

        .dialog:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left: 10px solid orange;
            position: absolute;
            top: 10px;
            right: -20px;
        }

        .icon {
            display: inline-block;
            width: 38px;
            height: 43px;
            background: url("pic1.png") no-repeat -330px -47px;
        }

        .icon2 {
            display: inline-block;
            width: 38px;
            height: 43px;
            background: url("pic1.png") no-repeat -371px -47px;
        }

        .box {
            width: 300px;
            height: 200px;
            background: blue;
            margin-left: 30px;
            margin-top: 20px;
            /*!*位移*!
            transform: translate(20px,50px);*/
            /*!*旋转*!
            transform: rotate(45deg);*/
            /*!*缩放*!
            transform: scale(0.8);*/
            /* 斜切
             transform: skew(30deg,30deg);*/
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: pink;
            transition: all 2s ease;
        }

        /*补间动画*/
        .box2:hover {
            width: 500px;
            /*transform: scale(1.2);*/
            transform: rotate(45deg);
        }

        .box3 {
            margin-top: 50px;
            margin-left: 50px;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            background: pink;
            transform: rotate(45deg);
            transition: all 2s ease;
        }

        .box3 span {
            display: inline-block;
            transform: rotate(-45deg);
        }

        .box3:hover {
            background: yellow;
            border: 2px solid red;
            color: red;
            font-size: 30px;
        }

        .box4 {
            margin-top: 50px;
            margin-left: 50px;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            background: blue;
            animation: run 2s linear;
            font-size: 30px;
            color: white;
        }

        .box4 span {
            animation: light 1s linear infinite;
        }

        .box5 {
            margin-top: 50px;
            margin-left: 50px;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background: red;
            animation: shun 2s linear infinite;
        }

        .box6 {
            margin-top: 50px;
            margin-left: 50px;
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background: red;
            animation: ni 2s linear infinite;
        }

        /*关键帧动画*/
        @keyframes shun {
            0% {
                transform: rotate(0deg)
            }
            25% {
                transform: rotate(90deg)
            }
            50% {
                transform: rotate(180deg)
            }
            75% {
                transform: rotate(270deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

        @keyframes ni {
            0% {
                transform: rotate(0deg)
            }
            25% {
                transform: rotate(-90deg)
            }
            50% {
                transform: rotate(-180deg)
            }
            75% {
                transform: rotate(-270deg)
            }
            100% {
                transform: rotate(-360deg)
            }
        }

        @keyframes light {
            0% {
                text-shadow: 0 0 0 #fff;
            }
            25% {
                text-shadow: 0 0 10px red;
            }
            50% {
                text-shadow: 0 0 30px blue;
            }
            75% {
                text-shadow: 0 0 10px green;
            }
            100% {
                text-shadow: 0 0 0 #fff;
            }
        }

        @keyframes run {
            0% {
                width: 200px;
            }
            25% {
                width: 300px;
            }
            50% {
                width: 400px;
            }
            75% {
                width: 300px;
            }
            100% {
                width: 200px;
            }
        }

        /*3D*/
        .d3 {
            width: 300px;
            height: 300px;
            margin-top: 100px;
            margin-left: 50px;
            position: relative;
            transform-style: preserve-3d;
            animation: ddd 1s linear infinite;
        }

        .d3 li {
            list-style: none;
            width: 300px;
            height: 300px;
            position: absolute;
            opacity: 0.5;
            top: 0;
            left: 0;
        }

        .d3 li:first-child {
            background: red;
            transform: translateY(150px) rotateX(90deg);
        }

        .d3 li:nth-child(2) {
            background: blue;
            transform: translateX(150px) rotateY(90deg);
        }

        .d3 li:nth-child(3) {
            background: green;
            transform: translateY(-150px) rotateX(90deg);
        }

        .d3 li:nth-child(4) {
            background: blue;
            transform: translateX(-150px) rotateY(90deg);
        }

        .d3 li:nth-child(5) {
            background: yellow;
            transform: translateZ(-150px);
        }

        .d3 li:nth-child(6) {
            background: orange;
            transform: translateZ(150px);
        }

        @keyframes ddd {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<!--双飞翼布局-->
<div class="center">
    <div style="padding: 0 150px">
        <p>浮动显示下拉菜单</p>
        <ul style="float: left;" class="u">
            <li class="parent">
                <a href="#" class="home">首页</a>
                <ul class="child">
                    <li><a href="#">显示</a></li>
                    <li><a href="#">显示</a></li>
                    <li><a href="#">显示</a></li>
                    <li><a href="#">显示</a></li>
                </ul>
            </li>
        </ul>
        <!--图片阴影-->
        <p>图片阴影</p>
        <img src="../image/2_2.jpg">
        <p>三角形</p>
        <div class="angle"></div>
        <br><br><br>
        <p>对话框</p>
        <div class="dialog">

        </div>
        <p>精灵技术</p>
        <div class="icon"></div>
        <div class="icon2"></div>

        <!--动画-->
        <div class="box"><p style="color: red">1、动画</p></div>
        <br>
        <p>动画</p>
        <div class="box2"><p style="color: red">2、补间动画</p></div>
        <br>
        <div class="box3"><span>3、补间动画</span></div>
        <br>
        <div class="box4"><span>4、关键帧动画</span></div>
        <br>
        <div class="box5"><span>圆，顺时针</span></div>
        <br>
        <div class="box6"><span>圆，逆时针</span></div>
        <br>
        <p>----------3D----------------</p>
        <ul class="d3">
            <li class="fr">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</body>
</html>
zxx_fly
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式，布局，动画

html lang="en">head> meta charset="UTF-8"> title>css样式布局title> style> * { margin: 0; padding: 0; } .center { width: 100%;
复制链接

扫一扫
专栏目录