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

html-css013

如何运用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>

CSS3 有一个 :target 属性

这是一个简单的DEMO 高级用法可以再百度搜索：

<!DOCTYPE html>

<html>

<head>

<style>

:target {

    border: 2px solid #D4D4D4

    background-color: #e5eecc

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>

<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>

<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>

</html>