CSS学习(一) —— checkwave

最新推荐文章于 2023-03-10 22:59:11 发布
最新推荐文章于 2023-03-10 22:59:11 发布
阅读量236 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/why_su/article/details/81506020
版权

学习地址： https://github.com/hakimel/css/tree/master/checkwave
演示效果

目录结构：
这里写图片描述
代码如下：
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CheckWave</title>
        <meta name="description" content="">
        <meta name="author" content="Su">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        <div class="credits">
            <a href="https://www.baidu.com">百度</a>
            <a href="https://www.sogou.com/">搜狗</a>
            <a href="https://www.google.com/">谷歌</a>
        </div>

        <script>
            var SIZE_X = 20; // x轴个数
            var SIZE_Y = 20; // y轴个数
            var MARGIN = 30; // 间距
            //判断设备
            if(/iphone|android|ipad/ig.test(navigator.userAgent)){
               SIZE_X = 10;
               SIZE_X = 10;
               MARGIN = 22;
            }

            var wrapper = document.createElement("div");
            wrapper.className = "wrapper";
            wrapper.style.width = (SIZE_X * MARGIN) + 'px';
            wrapper.style.height = (SIZE_Y * MARGIN) + 'px';
            document.body.appendChild(wrapper);

            var entities = [];
            for(var x = 0; x < SIZE_X; x++ ){
               for(var y = 0; y < SIZE_Y; y++){
                  var el = document.createElement("input");
                  el.setAttribute("type","checkbox");
                  wrapper.appendChild(el);

                  //需要设置position为absolute， left和top属性才会生效
                  el.style.left = (x * MARGIN)+ "px";
                  el.style.top = (y * MARGIN) + "px";

                  var entity = {
                     element: el,
                     x: x * MARGIN,
                     y: y * MARGIN
                  }
                  el.addEventListener("change",this.toggle.bind(this, entity));
                  entities.push(entity);

               }
            }

            function toggle(targetEntity){
                //如果被选中，值为true,如果未被选中，值为false
                var checked = targetEntity.element.checked;
                //获取当前选中的复选框的位置：  例如 [targetEntity.x,targetEntity.y] 等于[22,22]
                entities.forEach(function(entity){
                    //遍历，通过勾股定理算出每一个复选框和 当前选中的复选框的“距离”
                    var dx = targetEntity.x - entity.x;
                    var dy = targetEntity.y - entity.y;
                    var distance = Math.sqrt(dx * dx + dy * dy);

                    //按距离从近到远，开始定时操作,Math.round()选取最近的整数
                    setTimeout(function(){
                        entity.element.checked = checked;

                        //二次演示动画
                        entity.element.className = "";
                        entity.element.offsetWidth;
                        entity.element.className = "grow";

                    },Math.round(distance * 1.8));
                })

            }

        </script>

        <style type="text/css">
            .credits {
               position: absolute;  
               bottom: 25px;
               right: 20px;
               font-size: 15px;
               color: #fff;
            }
            .credits>* {
                vertical-align: middle;
                margin-left: 15px;
            }

            .credits a {
                color: #333;
                border: 2px solid #aaa;
                border-radius: 4px;
                text-decoration: none;
                padding: 8px 10px;
            }

            .credits a:hover {
               border-color: #666;
               color: #000;
            }
        </style>

    </body>
</html>

style.css

html,body {
  font-family: helvetica sans-serif;    
}

.wrapper {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
}

input {
  position: absolute; 
}

input.grow {
   /*-webkit 是表示针对 safari，chrome 浏览器支持，-ms表示针对 IE 浏览器支持*/
   /*第一个参数：规定需要绑定到选择器的 keyframe 名称*/
   /*第二个参数：animation-duration 完成动画所需时间 */
   /*第三个参数：贝塞尔曲线 */
  -webkit-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  -ms-animation:;
  animation: ;
}

/*百分比表示 进度, scale表示缩放*/
@-webkit-keyframes grow {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(2.5);}
    100% { -webkit-transform: scale(1);}
}
@-ms-keyframes grow {
    0% { -ms-transform: scale(1); } 
    30% { -ms-transform: scale(2.5); }  
    100% { -ms-transform: scale(1); }   
}
@keyframes name{
    0% {transform: scale(1);}
    30% {transform: scale(2.5);}
    100% {transform: scale(1);}
}
why_su
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css极速入门 —— grid布局
05-01
css极速入门 —— grid布局
HTML5 CSS3 541 —— 一天10个 —— 54天1
08-03
1、精通HTML5/CSS/JS/jQuery/React/Vue等web前端知识和框架，对前端性能优化 2、熟悉Node.js/PHP或其他类似后台技术，对前
CSS动画库
一梦醉殇
01-02 456
@charset "UTF-8"; /*!  * animate.css -http://daneden.me/animate  * Version - 3.5.2  * Licensed under the MIT license - http://opensource.org/licenses/MIT  *  * Copyright (c) 2017 Daniel Eden
openfoam v8 波浪算例学习日记： 3.手动运行算例
yunoicy的博客
01-02 4190
openfoam8 wave算例学习记录 手动运行算例 网格处理 Allrun里第一步为blockMesh划分网格。 此命令读取system/blockMeshDict字典文件。以下为该字典文件内容(已去掉文件头)： $ cat system/blockMeshDict ... convertToMeters 1; //顾名思义，直译为转换成米，1表示以下数字的单位为米 vertices //顶点 ( (0 -300 -10) //以下八个点坐标可以想象出其为长方体 (1200 -300
前端学习————css实现简单登录页面
qq_63606575的博客
03-13 6090
css实现简单登录页面一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML2.css 一、页面展示 二、思路 1.设置背景图片 2.设置登录框框并使其处于靠右位置 3.设置登录框框内容 三、代码展示 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心</
CSS系列005——画直线
hanbing1307的博客
03-10 1255
【代码】CSS系列005——画直线。
CSS学习笔记——精灵图(sprite)
热门推荐
weixin_45331887的博客
05-06 2万+
CSS学习笔记目录一、什么是精灵图？二、精灵图的优点三、精灵图的基本用法1、打开ps导入精灵图2、测量字母的大小及坐标3、效果图4、代码实现总结 一、什么是精灵图？ 所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。精灵图如下： 二、精灵图的优点 采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。 使用精灵图可以有效减少服务
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
HTML+CSS购物网站——小米有品
03-23
HTML+CSS购物网站——小米有品（含首页，购物车，个人信息，登录，商品详细信息，注册页面）
css技巧收藏——经典中的经典
09-22
css技巧在大家的记忆中多少都会一点吧，在本文所要介绍的是经典中的经典，如果你绝的自己所会的不够经典，那么请你不要错过了哈
学习【尚硅谷HTML5前端视频】主讲人李立超（上篇）
why_su的博客
01-04 8750
这位老师讲解的是真心好 地址(｡◕ˇ∀ˇ◕)。 1，这里使用 UTF-8 编码。 使用谷歌欧朋浏览器显示正常，但使用火狐，Edge，IE就是乱码，使用Sarifi浏览器也是乱码 这是为神马呢？ 因为谷歌欧朋浏览器默认解码是UTF-8，火狐IE（在中文系统）默认解码是GB2312，Sarifi浏览器默认解码是ISO-8859-1 解决方法：告诉浏览器编码格式 &lt;meta ch...
学习【尚硅谷HTML5前端视频】主讲人李立超（中篇，下篇）
why_su的博客
01-09 3999
视频地址ヾ(✿ﾟ▽ﾟ)ノ 1.电脑中的 1个像素的大小，相当于手机的4个像素的大小。也就是说，电脑中12px的长度，在手机中默认乘以4，为48像素     1em = 1font-size ,  1em 是相对于自身的字体大小来计算的。     颜色  rbg(255,255,255)  rgb(100%,100%,100%) 值在 0-255之间，用十六进制表示：  #红色绿色蓝色   #...
CSS世界（读书笔记一）
why_su的博客
08-20 583
1 , 对 CSS2.1的支持从 IE8开始的。 2, 元素都有内外两个盒子。display: inline-block; 可以理解为有两个盒子，外面的盒子是inline(能和图文在一行显示)，里面的盒子是 block （能设置width/height）。 所以 display:block;其实是 display: block-block;的 简写，display: table;可以...
学习CSS3 (一)
why_su的博客
01-25 578
地址（╬￣皿￣）＝○＃（￣＃）３￣） 层叠样式表 cascading style sheets 1. 字体 自定义字体：将 .ttf字体文件 保存在 font 目录下。 使用 @font-face指定字体的名字和路径，注意只能写在外部，不能写在选择器里面 <style type="text/css"> @font-face { ...
Top Pens Of 2013（099）—— Fixed Image Backgrounds
why_su的博客
08-14 276
2013年前100：https://codepen.io/2013/popular/pens/ 第100：https://codepen.io/dropside/pen/bxhke 学后有感：暂时还搞不懂 box-sizing: border-box; 的“具体”作用。具体详解有该博客： https://blog.csdn.net/qq_37453240/article/details/7...
学习【CSS权威指南】（一）
why_su的博客
11-23 266
不要使用 <font> 行内元素 内不能包含 块级元素 <p>这里的p标签是不能在这里的</p> <p>这样才正确</p> 要在<head>标签中引用 <link rel="stylesheet" type="text/css...
CSS学习（三）—— device-loop
why_su的博客
08-10 259
学习地址： https://github.com/hakimel/css/tree/master/device-loop 通过案例理解position:relative和position:absolute: https://segmentfault.com/a/1190000006924181#articleHeader3 不管是块级元素还是行内元素，应用了position:ab...
CSS学习（二）—— cloudy-spiral
why_su的博客
08-08 257
学习地址： https://github.com/hakimel/css/tree/master/cloudy-spiral perspector属性的 动画演示：http://www.fangyexu.com/tool-CSS3-Perspector.html 深入理解CSS变形transform(3d)： https://www.cnblogs.com/xiaohuochai/p/53514...
H5学习小结——div+css创建电子商务静态网页
最新发布
05-30
很好，我可以回答你关于H5学习小结——div+css创建电子商务静态网页的问题。 首先，使用div+css创建电子商务静态网页的基本步骤如下： 1. 设计页面结构，使用div元素来划分页面区域。 2. 使用CSS样式对div元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值