CSS3动画-案例实战

最新推荐文章于 2023-08-08 22:14:14 发布

LANGXUEWEN

最新推荐文章于 2023-08-08 22:14:14 发布

阅读量311

点赞数 2

分类专栏： CSS学习

本文链接：https://blog.csdn.net/weixin_43515797/article/details/109550837

版权

本文介绍了使用CSS3设计图形，包括菱形、平行四边形和三角形的方法，并展示了如何设计动画菜单，实现鼠标经过时的翻转效果，以及创建折叠面板和简单的轮播图。CSS3的动画和过渡效果让网页交互更加生动。

摘要由CSDN通过智能技术生成

1 设计图形

设计菱形

利用旋转rotate属性，正方形旋转45°即得菱形，但要保证原本图形为正方形

<body>
    <style type="text/css">
    #box{
   
        margin: 100px;
        width: 150px;
        height: 150px;
        background: #93FB40;
        box-shadow: 2px 2px 2px #999;
        transform: rotate(45deg);
    }
    </style>
    <div id="box"></div>    
</body>

在这里插入图片描述

设计平行四边形

利用倾斜skew属性，X轴或Y轴旋转一定角度，要保证原本图形为矩形

<body>
    <style type="text/css">
    #box{
   
        margin: 100px;
        width: 150px;
        height: 150px;
        background: #93FB40;
        box-shadow: 2px 2px 2px #999;
        transform: skewX(30deg);
    }
    </style>
    <div id="box"></div>    
</body>

在这里插入图片描述

设计三角形

将不需要方向的border属性设置为透明（transparent）

    <style type="text/css">
    #box{
   
        width: 0px;
        height: 0px;
        border-left: 100px solid transparent;
        border-top: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red;
    }
    </style>
    <div id="box"></div>

最低0.47元/天解锁文章

LANGXUEWEN

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画-案例实战

1 设计图形设计菱形利用旋转rotate属性，正方形旋转45°即得菱形，但要保证原本图形为正方形<body> <style type="text/css"> #box{ margin: 100px; width: 150px; height: 150px; background: #93FB40; box-shadow: 2px 2px 2px #999; tra
复制链接

扫一扫