css3-CSS+JavaScript制作滚动计数器

最新推荐文章于 2024-08-26 09:00:00 发布

chenchenxiaojian

最新推荐文章于 2024-08-26 09:00:00 发布

阅读量354

点赞数

分类专栏： css3 javascript 文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_42100456/article/details/106987722

版权

本文介绍了如何利用CSS3的flex布局、2D/3D变换及伪元素，结合JavaScript来创建动态的滚动计数器。通过设置父元素的flex属性，调整子元素的显示方式；运用transform进行Y轴平移；使用::before和::after来辅助计数；并借助JavaScript动态修改样式和元素内容，以实现数字的增减效果。

摘要由CSDN通过智能技术生成

知识点

flex属性：父元素设置为flex布局，子元素设置flex属性（flex-grow flex-shrink flex-basis）；
transform：2D,3D变换，主要涉及Y轴平移；
::before,::after元素的使用，分别作为当前数字的减一和加一；
JavaScript：修改css属性值，修改标签属性值。

效果

在这里插入图片描述

Code

html & javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="container">
        <button onclick="subtract()">-</button>
        
        <</