web前端--CSS（二）过渡、动画&盒子模型

最新推荐文章于 2023-04-21 17:31:16 发布

前端小窝

最新推荐文章于 2023-04-21 17:31:16 发布

阅读量394

点赞数 1

分类专栏： # CSS 文章标签： CSS动画

本文链接：https://blog.csdn.net/weixin_44105459/article/details/102563458

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、过渡、动画

所谓过渡即渐变效果，动画类似，注释部分为过渡。
hover为动画hover效果：鼠标放到此处，出现动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS过渡&动画</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        /*p:hover{*/
        /*    width:200px;*/
        /*    height: 300px;*/
        /*    background-color: #2066ff;*/
        /*    transition-delay: 200ms;*/
        /*    transition-duration: 500ms;!*渐变时间*!*/
        /*    !*transition-property: background-color;!*颜色渐变，其他立刻*!*!*/
        /*    transition-timing-function: linear;*/
        /*    !*linear变化速度线性；ease：慢快慢；ease-in：下凹慢快；ease-out上凸快慢；ease-in-out慢快慢，效果更明显*!*/
        /*整体效果：100*200--》200*300，颜色变化，有渐变效果*/
        /*}*/
        p:hover{
            animation-duration: 500ms;
            animation-delay: 200ms;
            animation-name: dongHua;
            animation-iteration-count: infinite;/*循环播放*/
            animation-iteration-count: 3;/*播放3次*/
            animation-direction: alternate;/*以反方向运行大小大小效果*/


    }
    @keyframes dongHua {
        from{
            width: 100px;
            height:100px;
            background-color: #ff2687;
        }
        50%{}
        75%{}
        to{
            width: 200px;
            height:200px;
            background-color: #ff2539;
        }

    }
</style>
</head>
<body>
<p></p>
</body>
</html>

二、盒子模型

盒子模型是css样式中最常用的一种模型，简单来说是用来排版页面上的结构，样式。只是用html+CSS切图的话，肯定少不了用盒子模型。盒子模型中有以下几个常用的属性：
content 内容
padding 内边距
border 边框
margin 外边距，距离页面边界的距离
div 常用标签，用来排版，设计结构，无其他作用
在这里插入图片描述
这是盒子模型的标准结构，以下给一个简单示例。

```css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style type="text/css">
        .class1{
            border: 1px solid rebeccapurple;
            background-color: aqua;
            /*padding-top: 20px;*/
            /*padding-bottom: 20px;*/
            padding: 20px 10px;/*上下20，左右10（top，bottom，left，right）*/
            /*margin: 500px;*/
            background-clip: content-box;/*只在文本处加背景颜色*/
        }
    </style>
</head>
<body>
<div class="class1">文本</div>
</body>
</html>

前端小窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端--CSS（二）过渡、动画&盒子模型

所谓过渡即渐变效果，动画类似，注释部分为过渡。hover为动画hover效果：鼠标放到此处，出现动画。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS过渡&动画</title> <styl...
复制链接

扫一扫