利用css3完成一部分类似使用JavaScript实现的功能

最新推荐文章于 2024-04-26 16:47:03 发布

zhong_333

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量40

点赞数 2

文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/zhong_333/article/details/132634653

版权

1.用css3动画实现轮播效果

很多网站都存在轮播效果，但是再不引用JavaScript的情况下，利用css3的动画效果也能实现类似的效果

html：

<body>
    <div class="shangd">
    <div class="box">
        <div class="box1 clear">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>

css：

<style>
        .shangd {
            overflow: hidden;
        }

        .box {
            width: 1200px;
            height: 456px;
            margin: 0 auto;
            position: relative;
        }

        .box1 {
            width: 4494px;
            height: 488px;
            position: relative;
            left: -540px;
            animation: move_img 9s infinite;
        }

        .box .box1>div {
            width: 749px;
            height: 400px;
            float: left;
        }

        .box .box1>div:nth-child(1) {
            background-color: red;
        }

        .box .box1>div:nth-child(2) {
            background-color: blue;
        }

        .box .box1>div:nth-child(3) {
            background-color: yellow;
        }

        .box .box1>div:nth-child(4) {
            background-color: black;
        }

        .box .box1>div:nth-child(5) {
            background-color: pink;
        }

        .box .box1>div:nth-child(6) {
            background-color: aqua;
        }

        /* 设置动画 */
        @keyframes move_img {
            0% {
                transform: translateX(0);
            }

            33% {
                transform: translateX(-749px);
            }

            66% {
                transform: translateX(-1498px);
            }

            100% {
                transform: translateX(-2247px);
            }
        }
    </style>

2.利用css的选择器层叠实现类似JavaScript的排他效果

排异思想一直都是利用JavaScript实现的，当选中其中一个元素时，要清楚其他兄弟元素的样式，从而实现独立存在的效果

近期在研究css选择器的时候，突然发现可以利用hover加上兄弟选择器，去逐级寻找拥有默认样式的属性，并清楚其默认样式，达到类似JavaScript的排异效果

html：

<div class="nav">
        <div class="nav1">按钮1</div>
        <div class="nav2">按钮2</div>
        <div class="nav3">按钮3</div>
        <div class="nav4">按钮4</div>
        <div class="nav5">按钮5</div>
        <div class="nav6">按钮6</div>
    </div>

css：

<style>
        .nav{
            width: 600px;
            height: 100px;
        }
        .nav div{
            width: 50px;
            height: 20px;
            margin-left: 30px;
            padding: 10px;
            float: left;
            cursor: pointer;
        }
        .nav6{
            background-color: aqua;
        }
        .nav div:hover{
            background-color: aqua;
        }
        .nav1:hover+.nav2+.nav3+.nav4+.nav5+.nav6{
            background-color: white;
        }
        .nav2:hover+.nav3+.nav4+.nav5+.nav6{
            background-color: white;
        }.nav3:hover+.nav4+.nav5+.nav6{
            background-color: white;
        }.nav4:hover+.nav5+.nav6{
            background-color: white;
        }.nav5:hover+.nav6{
            background-color: white;
        }
    </style>

3.利用div盒子布局的思想+兄弟选择器实现“回到顶部”模块的监听鼠标滚轮的效果

很多网页里面都存在“回到顶部”的模块，一般是利用position: fixed;固定定位实现的，但是“回到顶部”模块在页面存在于最上方时是不会显示的，一般这里会运用JavaScript当中的事件监听鼠标滚轮的下滑数值来改变“回到顶部”模块的显示。

按照现在主流的div盒子布局方式，完全可以将每个模块的主题写一个hover，去实现当鼠标移入下面的板块时实现“回到顶部”的显示。布局思路和实现思路和实现JavaScript的排他效果类似。

zhong_333

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css3完成一部分类似使用JavaScript实现的功能

固定定位实现的，但是“回到顶部”模块在页面存在于最上方时是不会显示的，一般这里会运用JavaScript当中的事件监听鼠标滚轮的下滑数值来改变“回到顶部”模块的显示。布局思路和实现思路和实现JavaScript的排他效果类似。近期在研究css选择器的时候，突然发现可以利用hover加上兄弟选择器，去逐级寻找拥有默认样式的属性，并清楚其默认样式，达到类似JavaScript的排异效果。排异思想一直都是利用JavaScript实现的，当选中其中一个元素时，要清楚其他兄弟元素的样式，从而实现独立存在的效果。
复制链接

扫一扫