应用CSS3来替代JS完成互动

日期:2021-03-02 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

【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:⑴px;-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:⑴px;-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>

【表明】

上面包含了众多的互动,hover的互动、checked的互动;

针对上面的完成方式坚信,早就经有许多人完成了;这里关键说说我针对这次的感悟和针对技术性的期待,到如今工作中也是有近4年了,在这些年中,发展快慢自知,但同样的1点便是,许多专业知识都会用,也了解如何用;可这次才真实搞清楚,什么是只知其意,不知道其真意,为什么!

上面的互动实际效果,在以前我全是用css和js融合的方法完成;期内也尝试着所有应用css完成互动实际效果,但是却在探寻的情况下固步自封致使到如今才真实的完成当初的念头;

应用CSS彻底完成的益处,提升了可复用性和可维护保养性,针对完成相应组件出示了更好的完成方法,另外也提升了特性;
 

.list__con .input:checked+label 

如上面这类用法,大家可使用CSS3提升的各种各样强劲的挑选器,完成更多更好的互动实际效果;从此离去应用JS更改DOM的不幸,更多的趋向于CSS