使用CSS3来代替JS实现交互


Posted in HTML / CSS onAugust 10, 2017

【CSS3和JS】

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

【CSS3的其他用法】

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

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

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.list__con .input:checked::after{content:'';width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:'';position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.list__con .delete::before{content:'';position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
</style>
<div class="list__con">
    <div class="box">
        <div class="delete"></div>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </div>
</div>

使用CSS3来代替JS实现交互

【说明】

上面包括了诸多的交互,hover的交互、checked的交互;

对于上面的实现方法相信,早已经有很多人实现了;这里主要说说我对于这次的感悟和对于技术的憧憬,到现在工作也有近四年了,在这些年中,成长快慢自知,但相同的一点就是,很多知识都会用,也知道怎么用;可这次才真正明白,什么叫只知其意,不知其真意,为何!

上面的交互效果,在之前我都是用css和js结合的方式实现;期间也尝试着全部使用css实现交互效果,不过却在探索的时候故步自封导致到现在才真正的实现当初的想法;

使用CSS完全实现的好处,提高了可复用性和可维护性,对于实现相应组件提供了更好的实现方式,同时也提高了性能;
 

.list__con .input:checked+label

如上面这种用法,我们可以使用CSS3增加的各种强大的选择器,实现更多更好的交互效果;从此离开使用JS改变DOM的悲剧,更多的倾向于CSS

HTML / CSS 相关文章推荐
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 #HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 #HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 #HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
You might like
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
laravel安装和配置教程
2014/10/29 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
php实现微信企业转账功能
2018/10/02 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
javascript 常用功能总结
2012/03/18 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
JavaScript实现简单轮播图效果
2018/12/01 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
快速入门python学习笔记
2017/12/06 Python
Python输入二维数组方法
2018/04/13 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python3中列表list合并的四种方法
2019/04/19 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python 实现矩阵按对角线打印
2019/11/29 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
工作检讨书怎么写
2014/10/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
让生命充满爱观后感
2015/06/08 职场文书
导游词之南京中山陵
2019/11/27 职场文书
如何在C++中调用Python
2021/05/21 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL