css3如何通过点击改变样式

html-css024

css3如何通过点击改变样式,第1张

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>

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式:

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果:

上面的CSS代码可以生成如下图的动画效果:

在“Stana”效果中,使用了html5 SVG clipPath,在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性,这个效果也需要浏览器的支持才能看得到的。

声明楼上的答复基本上是对的

但是,还是告诉你css3可以达成“处理click事件”类似的效果,比如checkbox,click后就能利用UI元素状态伪类来实现相应的变化,这种变化有点类似处理click事件,只是小范围的应用。

比如纯css3实现的checkbox按钮开关,你可以到mxria网站上看CSS3按钮开关的实现DEMO

css3在响应用户操作上很弱,基本上还是实现静态样式为主