如何运用CSS3把元素从一种样式变换为另一种样式

html-css0153

如何运用CSS3把元素从一种样式变换为另一种样式,第1张

<div class="box1"></div>

<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定时器关系不大,定时器一般用在播放轮播图什么的,主要是动效,也不难,看看视频教程就可以轻松搞定