html 数据交互动画,纯css实现可交互的动画

如题，不借助JavaScript，只利用CSS，如何实现可交互式的动画呢？或许该需求仅此一种解决方案，绝无仅有。不知该方案是否是第一次找到。

什么是可交互动画？

就是可以响应用户的动画，直接上图吧，更直观更清晰。

当用户点击按钮或者心的时候，就会跳动一下。

该示例中用到的有趣知识点

1. 重写checkbox样式

我们经常遇到一个问题，需要重写checkbox，这个示例正好用到，值得收藏。这里直接是重写了input的样式，思路如此，代码如下：

input {

display: inline-block;

width: 36px;

text-align: center;

}

input::after {

content: attr(label);

display: inline-block;

width: 100%;

height: 100%;

background-color: white;

white-space: normal;

cursor: pointer;

}

input:active::after {

cursor: wait;

}

复制代码

2. 两种兄弟选择器

1. +号选择器。

选择DOM结构在自己下方且紧邻自己的单个兄弟元素。

2. ~号选择器。

选择DOM结构在自己下方的所有兄弟元素。

有时候我们很想选择自己的兄弟元素，不关心他们DOM结构的关系，目前CSS是做不到。而有时候我们也很想选择父元素，目前CSS也是没有的，如果有，该示例就灵活多了。如果有，我们也可以选择所有的兄弟元素了。

目前父元素选择器还在草案阶段，而且计划是CSS5才会出，这是多年以后的事情了。

3. :checked选择器。

当checkbox的状态选中时，可以应用一组样式。

上面三点是「纯CSS实现可交互动画」的基础。不过，还有一些基础需要知道。

4. 样式优先级。

定义在文件下方的样式会覆盖文件上方的样式 -- 其他优先级这里不多说。

5. 动画通常是立即执行。

放在这里说明的原因是，我们通过:checked选择及兄弟选择器找到目标元素，给它设置动画属性。当然动画也有paly属性。

有了上面的知识点，基本就可以开始搞了。那为什么不写一些动画相关的呢？因为动画可以有千万种，但是仅仅通过CSS就让你的动画可交互，目前我所知，只有这一种，欢迎来探索。这里不包含「transition」。

如何实现？

结合上面的知识点，下面给出思路。

1. 先贴出HTML代码结构。

外层包了一层div，示例简单，可有可无。定义了一个类，示例中没有用到，权当注释就好。

复制代码

2. 覆盖原生checkbox样式。

上面代码已经贴出来。这里是简单覆盖其样式，真实需求中，可以再做变换。

为什么会有两个checkbox？一个类名是init，一个类名是alternating。一个是为了初始化目标(需要执行动画的元素)元素，一个是来回切换目标元素的动画。div.heart是目标动画元素。且看以下思路。

3. 首先隐藏alternating checkbox。

.alternating {

display: none;

}

复制代码

4. 当init被选中时：

1. 隐藏自己

.init:checked {

display: none;

}

复制代码

2. 显示alternating

.init:checked + .alternating {

display: inline-block;

}

复制代码

3. 给heart设置动画

.init:checked ~ .heart {

animation-name: init;

}

复制代码

heart被初始化之后，立马执行一个动画，且该动画属性一直保留在heart上。因为init已经隐藏，且始终是选中状态。那么上面的第三段CSS会一直存在。

5. 当alternating被选中时，给heart设置新的动画。

.alternating:checked ~ .heart {

animation-name: alternating;

}

复制代码

由于该代码位于init之后，所以，heart会执行新的动画。

6. 当alternating取消选中。

第五条的动画失效，init的动画再次生效。

至此，整个思路已经清晰。init负责初始化动画，alternating在选中与取消变化的过程中，隐式的给heart交替设置了动画。

全部代码

上面已经提到，动画不是本篇的重点。重点是可交互的思路。隐藏，heart这里不再的实现这里不再给出。但是，为了能拿到代码就能看效果，这里简单给一个不是动画的动画代码。

以下代码是全部。

纯css实现可交互的动画

input {

display: inline-block;

width: 36px;

text-align: center;

}

input::after {

content: attr(label);

display: inline-block;

width: 100%;

height: 100%;

background-color: white;

white-space: normal;

cursor: pointer;

}

input:active::after {

cursor: wait;

}

.alternating {

display: none;

}

.init:checked {

display: none;

}

.init:checked~.heart {

animation-name: init;

}

.init:checked+.alternating {

display: inline-block;

}

.alternating:checked~.heart {

animation-name: alternating;

}

.heart {

animation-duration: 1s;

animation-fill-mode: forwards;

}

/* 动画 */

@keyframes init {

0% { transform: scale(0.8, 0.8); opacity: 1; }

25% { transform: scale(1, 1); opacity: 0.8; }

100% { transform: scale(0.8, 0.8); opacity: 1; }

}

@keyframes alternating {

0% { transform: scale(0.8, 0.8); opacity: 1; }

25% { transform: scale(1, 1); opacity: 0.8; }

100% { transform: scale(0.8, 0.8); opacity: 1; }

}

.heart {

margin: 100px;

width: 100px;

height: 100px;

background: red;

filter: drop-shadow(0px 0px 20px red);

}

复制代码