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);
}
复制代码
html 数据交互动画,纯css实现可交互的动画相关推荐
- 纯CSS制作加div制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.效果图 二.步骤 1.html部分 2.css部分 前言 纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
- css 跳跃动画,如何使用纯CSS实现方块跳跃的动画(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...
- 纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- 纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
- 纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
- css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画 今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示 ...
- 沙漏PHP代码,如何使用纯CSS实现一个沙漏的动画效果
本篇文章给大家带来的内容是关于如何使用css实现监控网络连接状态的页面 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/c ...
- android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...
最新文章
- 解压与压缩ramdisk.img文件,生成uramdisk.img文件
- poj 1958 Strange Towers of Hanoi
- 访问新建的SpringBoot项目提示:WhitelabelErrorPage
- 超时空机战服务器配置信息错误,超时空机战熔炉篇FAQ教你如何合理的使用熔炉...
- 数通手稿留档——Multicast
- shell echo 彩色字体
- C#设计模式学习(类型对象模式)
- 21秋期末考试成本会计10168k2
- 耳挂式蓝牙耳机原理_专为运动而生的DOSS T63无线蓝牙耳挂式运动耳机
- Python实现Matlab绘制散点图
- 让Google earth叠加中文地图
- CNKI E-Study与Endnote 的参考文献题录互导
- STM32系列BSP外设驱动使用教程
- Ubuntu安装过程之磁盘分区图文教程
- 0714.买卖股票的最佳时机含手续费【贪心算法】
- 第三方登陆--狸菇凉_
- 苹果在研发屏下 Face ID 和 Touch ID该技术可能最终不会商用
- day25:组合总和,电话号码的字母组合
- 淘淘商城第78讲——查询商品详情添加缓存的分析
- 矩阵知识:正交矩阵、行列式、子式与代数余子式
热门文章
- 618京东淘宝自动脚本
- protobuf java代码生成及实例
- Python操控鼠标和键盘
- new joiner
- 位(bit)、字节(Byte)、MB(兆位)换算关系
- CANoe操作介绍系列 ———— Analysi功能区中Graphic的介绍与使用
- OpenFOAM-v2112安装——很详细
- Java环境下运行fastqc_在Ubuntu上安装FastQC
- fatal error C1189: #error : Building MFC application with /MD[d]
- total uninstall 7(卸载清除工具) v7.00