使用CSS3来代替JS实现交互 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关使用CSS3来代替JS实现交互的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>【CSS3和JS】

对于CSS了解的同学都知道,CSS的实现是最底层的,在实现方式和性能上都不是,JS这种提供接口的脚本可比的;从CSS3的动画和JS动画对比角度来看两者,会更清晰,而且随着前端框架的使用,页面动画会越来越多的应用CSS3

<强>【CSS3的其他用法】

除了动画的代替,还有就是对于各种交互的实现上,也体现了CSS的强大,更多的是使用CSS3提供的选择器;

先来看个例子:可以更好的体现我这次对于CSS的深刻感悟

& lt; style> 　　身体{背景:# f4f4f4;保证金:0;}/* */列表　　.list__con {} 　　.list__con .box{背景:# fff;位置:相对;边界底部:solid 1 px # 858585;溢出:隐藏;} 　　.list__con .box:悬停{背景:# f4f4f4; -webkit-transition: all 6;转型:all 6;} 　　.list__con .box: hover delete {-webkit-transition: all 6;过渡:all 6、不透明度:1;} 　　.list__con .input {-webkit-appearance:没有;外观:没有,位置:绝对;:10 px;左:12 px;填充:0;边界:没有,保证金:0;宽度:24 px;高度:24 px;边界:solid 2 px 红色;border - radius: 50%; box-sizing: border-box;轮廓:没有,光标:指针;} 　　后检查.list__con .input:::{内容:& # 39;& # 39;;宽度:14 px;高度:14 px;背景:红色;位置:绝对的,:3 px;左:3 px; border - radius: 50%;} 　　{.list__con 标签行高:24 px;填充:10 px 0, 10 px 48 px;显示:块;-webkit-transition: all 。4;转型:all 。4;} 　　{.list__con .input:检查+标签颜色:# d9d9d9;文字修饰:线穿过;} 　　.list__con delete{宽度:44 px;高度:44 px;浮动:正确的,位置:相对,光标:指针;不透明度:0;} 　　.list__con delete:后盘旋:{-webkit-transform:旋转(225度),变换:旋转(225度);} 　　.list__con delete:前徘徊:{-webkit-transform:旋转(225度),变换:旋转(225度);} 　　.list__con delete::{后内容:& # 39;& # 39;;位置:绝对的,宽度:2 px;高度:20 px;背景:红色;:12 px;左:50%;margin-left: 1 px; -webkit-transform:旋转(45度),变换:旋转(45度),这个特性:4 px; -webkit-transition: all 6;转型:all 6;} 　　.list__con delete::{之前内容:& # 39;& # 39;;位置:绝对的,宽度:20 px;高度:2 px;背景:红色;:50%;左:12 px; margin-top: 1 px; -webkit-transform:旋转(45度),变换:旋转(45度),这个特性:4 px; -webkit-transition: all 6;转型:all 6;} 　　& lt;/style> 　　& lt; div 类=發ist__con"祝辞　　,,,& lt; div 类=癰ox"比; 　　,,,,,,,& lt; div 类=癲elete"祝辞& lt;/div> 　　,,,,,,,& lt; input 类=癷nput",类型=癱heckbox",/比; 　　,,,,,,,& lt; label>啥地方垃圾费& lt;/label> 　　,,,& lt;/div> 　　& lt;/div>

使用CSS3来代替JS实现交互