12 2021 档案
摘要：本人用的是win10系统，这里也着重介绍win10系统的激活方式 激活方式： 1.首先系统HOSTS文件添加以下屏蔽网络 127.0.0.1 red-gate.com 127.0.0.1 www.red-gate.com 127.0.0.1 licensing.red-gate.com 127.0.
阅读全文
摘要：1 <p>使用contextmenu禁止鼠标右键</p> 2 <script> 3 document.addEventListener('contextmenu', function (e) { 4 e.preventDefault() // 阻止默认行为 5 }) 6 </script> 1 <p
阅读全文
摘要：动画animation 1.先定义动画： @keyframes 动画名称( from{} to{} ) 或者 @keyframes 动画名称( 0%{} 50%{} 100%{} ) 百分号指的是动画时长的占比。 2.使用动画 在需要使用动画的元素中添加 animation：动画名称 动画时长 速度
阅读全文
摘要：借助transform:rotate实现上图的3D导航效果 具体代码如下 1 <div class="nav"> 2 <ul> 3 <li> 4 <a href="#">首页</a> 5 <a href="#">index</a> 6 </li> 7 <li><a href="#">新闻</a> 8
阅读全文
摘要：实现效果如下： 观察发现鼠标放上去的时候出现了三个变化，渐变背景，文字位移和图片放大。 渐变背景：background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景
阅读全文
摘要：缩放：transform:scale(倍数); 实现hover的时候加载播放图标，具体效果如下： 首先需要创建一个大盒子，盒子上面部分用一个div来呈放图片，下面部分直接书写文字。观察发现播放图标是存在于上部图片的居中位置，所以可以考虑在上面部分加上after伪元素然后通过定位的方式居中在图片的中间
阅读全文
摘要：transform可以用于实现位移，旋转，缩放等效果。 位移：transform: translate(水平距离,垂直距离); 这里先借助其位移属性实现双开门的效果，鼠标hover的时候最上面的图片向两边展开，鼠标离开的时候恢复原状。 先定义一个盒子呈放底层的图片，在分别定义两个元素去添加背景图片，
阅读全文
