HTML5基础加强css样式篇（animation属性animation-name,animation-delay,animation-duration，等)（三十）

来源：互联网发布：熊本熊mac电脑壁纸编辑：程序博客网时间：2024/06/05 18:12

1.animation简单使用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            animation-name: mykeyframes;            /*动画执行时间*/            animation-duration: 3s;        }        .box:hover {            /* 鼠标悬浮时样式                放大两倍, 1.5s时，缩小1/2                颜色 橘黄色 - 蓝色 - 红色 - 绿色            */            /*transform: scale(2);*/            /*background-color: blue;*/            /*transition: 3s;*/        }        /*关键帧：定义了动画的变换规则*/        @keyframes mykeyframes {            0%{                background-color: or@ange;            }            20%{                background-color:  blue;            }            50%{                background-color:  red;                transform: scale(.5);            }            100%{                background-color:  green;                transform: scale(2);            }                    }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

2.动画名称：animation-name,动画执行时间：animation-duration，动画延时播放：animation-delay，动画效果：animation-timing-function，

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            animation-name: mykeyframes;            /*动画执行时间*/            animation-duration: 3s;            /*动画延迟播放*/            animation-delay: 1s;            /*动画效果*/            animation-timing-function: ease;            animation-timing-function: linear;            animation-timing-function: ease-out;        }        .box:hover {            /* 鼠标悬浮时样式                放大两倍, 1.5s时，缩小1/2                颜色 橘黄色 - 蓝色 - 红色 - 绿色            */            /*transform: scale(2);*/            /*background-color: blue;*/            /*transition: 3s;*/        }        /*关键帧：定义了动画的变换规则*/        @keyframes mykeyframes {            0%{                background-color: orange;            }            20%{                background-color:  blue;            }            50%{                background-color:  red;                transform: scale(.5);            }            100%{                background-color:  green;                transform: scale(2);            }                    }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

0 0