<style type="text/css">
body{margin:0padding:0}
.box1{height:300pxwidth:300pxbackground:#3695d5}
.box1{/*过渡效果*/
transition: width 2s
-moz-transition: width 2s /* Firefox 4 */
-webkit-transition: width 2s /* Safari 和 Chrome */
-o-transition: width 2s /* Opera */
}
.box1:hover{background:#dcdcdcheight:400pxwidth:400px}/*使用伪类hover，鼠标悬浮选取元素，改变样式*/
</style>
关键在于你转换的条件,你没说你要怎么转换,一般宽度改变就是用媒体查询,具体百度用法,鼠标悬浮就是应用js特性,有鼠标移入移出事件,键盘按下放开事件,鼠标移动事件,和那位回答的js定时器关系不大,定时器一般用在播放轮播图什么的,主要是动效,也不难,看看视频教程就可以轻松搞定你是想把单独的CSS文件合并到HTML文件内吗？在HTML页面内直接加入CSS样式代码？
1，外联式样式表；
<head>
<link rel="stylesheet" href="/css/index.css">
</head>
2，内嵌样式表；
<head>
<style type="text/css">
<!--
p{font:12pxcolor:red}
-->
</style>
</head>
3，元素内定；
<p style="color:redline-height:16px">
4，导入样式表
<head>
<style type="text/css">
<!--
@import url(css/index.css)
-->
</style>
</head>
内嵌样式表和元素内定都是直接将CSS样式写在HTML页面的，纯手打，望采纳，谢谢
