CSS基础-29CSS动画-过渡

来源:互联网 发布:机器人仿真软件dami 编辑:程序博客网 时间:2024/06/06 03:18
<!DOCTYPE html><!--CSS动画-过渡--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="css08.css" type="text/css" rel="stylesheet"></head><body>    <div>展示效果</div></body>

</html>

css:

div{    width: 100px;    height: 100px;    background-color: aqua;    /*执行过度的动画效果*/    transition: width 2s,height 2s,transform 2s  ;    /*支持 chrome safari浏览器*/    -webkit-transition: width 2s,height 2s,-webkit-transform 2s  ;    /*延迟执行2s*/    transition-delay: 2s;}/*鼠标放上去时,出现的效果*/div:hover{    width: 200px;    height: 200px;    transform: rotate(360deg);    -webkit-transform: rotate(360deg) ;}

0 0
原创粉丝点击