分类 Web前端下的文章 - Roookie博客

2021-11-19

2021年11月19日
35 阅读
0 评论
0 点赞

2021-10-19

2021年10月19日
44 阅读
0 评论
0 点赞

2021-04-29

简单总结CSS中元素形状的平滑变化目录：前言一、transition属性 ——设置过渡效果 1.作用： 2.属性： 3. 默认值： 4.JavaScript语法： 5.使用及说明：二、transform属性 ——变化效果 2语法： 3.属性值：三、效果演示代码 1.html代码 2.CSS代码前言将鼠标放到图片上面以查看实现效果：例子涉及到的相关知识点如下：一、transition属性 ——设置过渡效果 1.作用：设置元素变化时的过渡效果 2.属性： transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格：值描述 transition-property 指定哪个元素属性会发生变化 transition-duration 指定过渡效果需要多少秒或毫秒才能完成 ransition-timing-function 指定过渡效果的变化速度曲线 transition-delay 定义过渡效果延迟多长时间开始注：使用时应该必须指定 transition-duration 属性，否则效果持续时间为0，不会有任何效果 3. 默认值： all 0 ease 0 4.JavaScript语法： object.style.transition="width 2s"; 5.使用及说明：举个例子：存在一个矩形，设置过渡效果为：延迟1s，矩形的宽度变化，过渡时间为0.5s，过渡效果的变化曲线为linear ，代码如下： .div { transition-property: width; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 1s; } 上面写法看起来就很繁琐，更别说写起来了。所以为了方便，可以将这几个属性合并成transition 属性，上面的就可以这么写： .div { transition: width 0.5s linear 1s; // 部分用不到的属性可以省略，一般都得设置产生过渡变化的属性和过渡时间 } 除了设置单个属性的变化效果，也可以设置多个属性的变化效果，中间用逗号隔开： transition: width 2s, height 1s, transform 2s; 二、transform属性 ——变化效果 1.作用：设置元素的变化效果，与transition属性一起使用可实现元素的平滑变化 2语法： transform: none|transform-functions; 3.属性值：值描述 none 不进行转换。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 scale(x[,y]?) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。更多transform变化属性参考： CSS3 transform 属性 | 菜鸟教程 (runoob.com) 三、效果演示代码 1.html代码 <div class="box"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/agree.png" alt="网络未连接或图片链接已失效" class="agree"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/windmill.png" alt="网络未连接或图片链接已失效" class="windmill"> </div> 2.CSS代码 <style> .box { display: inline-flex; border:1px solid #aaabad; margin:10px; } .agree { width: 60px; height: 60px; margin: 45px; transition: all 0.5s; } /* 设置鼠标悬浮到图片上时图片的变化效果 */ .agree:hover { transform: scale(1.5); } .windmill { margin: 30px; width: 100px; height: 100px; transition: all 3s; } .windmill:hover { transform: rotate(720deg); } </style>

2021年04月29日
244 阅读
0 评论
2 点赞

2021-04-18

2021年04月18日
335 阅读
0 评论
0 点赞

2021-04-16

Bootstrap框架实现简易的模态框目录：一、模态框的简单介绍二、代码实现 1.HTML代码 2.CSS代码一、模态框的简单介绍点击按钮以查看实现效果：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。简单结构大概是这样：二、代码实现导入jQuery和Bootstrap： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"> </script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 1.HTML代码 <h2>Bootstrap框架实现简易的模态框</h2>  <button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button>  <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true">  <div class="modal-dialog">  <div class="modal-content">  <div class="modal-header">  <button class="close" data-dismiss="modal" aria-hidden="true">  × </button>  <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4> </div>  <div class="modal-body"> <br><a href="https://www.langp.wang"> <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接"> </a> </div>  <div class="modal-footer">  <button class="btn btn-info" data-dismiss="modal">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> 2.CSS代码 h2,h4,.modal-body{ text-align:center; } .click{ display:block; padding:10px; margin:30px auto; } 更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)

2021年04月16日
250 阅读
0 评论
0 点赞

2021-04-16

用jQuery实现元素被点击选中的效果目录：一、说明二、代码实现 1.HTML代码 2.CSS代码 3.JS代码一、说明页面中存在四个div元素，实现以下效果：当鼠标放置在div元素上面的时候，元素呈现平滑放大效果；鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果演示效果如下，鼠标点击即可选中或者用按钮进行多选：二、代码实现提前导入jQuery文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 1.HTML代码 <h2>用jQuery实现元素被点击选中的效果</h2> <div class="box"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <button id="all-selected">全选/取消全选</button> </div> 2.CSS代码 <style> h2 { text-align: center; } .box{ display:flex; border:1px solid #aaabad; width:700px; margin:auto; } /*给盒子设置样式*/ .box>div { border: 3px solid dodgerblue; margin: 30px auto; padding: 15px; border-radius: 10px; /* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */ transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } /*为盒子添加伪类，实现鼠标放到元素上的效果*/ .box>div:hover { /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } /* 元素被选中时的效果 */ .selected { box-shadow: 0 0 15px deepskyblue; /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } #all-selected { width:100px; height:35px; border-radius:5px; display:inline-block; margin: 40px 25px 25px; transition:all 0.5s; } #all-selected:hover{ background-color:#c9c9c9; } </style> 3.JS代码 <script> // 设置一个变量symbol，来判断当前的状态是否为选中 let symbol = true; $(document).ready(function () { // 为box盒子添加点击事件 $(".box>div").click(function () { if (symbol === true) { // 当symbol的值为true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反 symbol = false; } else { // 当symbol的值为false时，移除"selected"属性 $(this).removeClass("selected"); // symbol的值取反 symbol = true; } }); // 为“全选”按钮添加全选事件 $("#all-selected").click(function () { if (symbol === true) { $(".box>div").addClass("selected"); symbol = false; } else { $(".box>div").removeClass("selected"); symbol = true; } }); }); </script>

2021年04月16日
318 阅读
0 评论
0 点赞