css过度

最新推荐文章于 2024-01-28 19:18:07 发布

又一个包子

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量848

点赞数

分类专栏： html基本知识

本文链接：https://blog.csdn.net/whpu1234/article/details/81315973

版权

html基本知识专栏收录该内容

27 篇文章 1 订阅

订阅专栏

重点在代码里：

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css过度</title>

    <style>
    #box{
        width: 350px;
        height: 350px;
        margin: 150px auto;
        border: solid 10px orange;
        background-color: rgb(14, 13, 13);

        
        /* 默认情况下，当一个元素发生变化时，改变是瞬间完成的。
        想要过度效果，需要加上过度属性值 */
        /* transition-property ,设置过度属性 ，并是说所有css属性都能过度 */
        /* transition-property:width; */

        /* transition:duration,设置过度时间 */
        /* transition: duration 1s; */

        /* transition-timing-function,设置动画速率，默认值ease-in-out(开始慢，中间块，结束慢)
        设置动漫速率曲线 */
        /* transition-timing-function:cubic- */

        /* 过度延迟，过度效果在多长时间后执行 */
        /* transition-delay 0.5s; */

        /* 以上所有属性可一次性完成 */
        transition:all 1s;
        
    }
    #box:hover{       /*鼠标悬停的效果*/
        background-color: #f8e10c;
        border: solid 20px orange;     /*边框大小及颜色*/
        color:rgba(0, 0, 0, 0);
        border-radius: 50%;        /*援交半径，切割的弧度*/
        transform: rotate(360deg);  /*旋转的度数*/
    }
    #box:active{      /*鼠标点击出发的效果*/
        box-shadow: 0px 0px 250px rgb(247, 191, 9);   /*元素阴影*/
    }
    
    
    
    
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

运行结果：

效果图1:

效果图2：

效果图3：动态的不能截图

又一个包子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css过度

重点在代码里：demo：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css过度&lt;/title&gt; &lt;style&gt; #box{
复制链接

扫一扫

专栏目录