边框与动画

最新推荐文章于 2024-05-27 12:37:30 发布

zxfly6

最新推荐文章于 2024-05-27 12:37:30 发布

阅读量456

点赞数

分类专栏： JAVA学习笔记

本文链接：https://blog.csdn.net/zxfly6/article/details/79533133

版权

JAVA学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.圆角边框

border-radius :用于指定圆角边框的圆角半径。

2.边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。

动画

1.渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。

第一个参数：指定对哪个HTML元素进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）
第四个参数：指定延迟时间。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover
    {
        width:300px;
    }
</style>

<body>
	<div></div>
</body>

如果想设置多个属性的渐变动画，使用逗号分隔。

transition: width,height 1s,1s ease,ease;

并不是所有的CSS属性都支持渐变动画。

支持动画的CSS属性

2.Animation动画

annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：

第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;

    }

    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }

</style>

<body>

	<div></div>

</body>

zxfly6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
边框与动画

1.圆角边框border-radius :用于指定圆角边框的圆角半径。2.边框阴影box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。第一个参数：控制阴影在水平方向的偏移。第二个参数：控制阴影在垂直方向的偏移。第三个参数：控制阴影的模糊程度。第四个参数：控制阴影的缩放程度。第五个参数：改属性值控制阴影的颜色。&lt;style&gt; div{ width:300px; heig...
复制链接

扫一扫

专栏目录