![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页特效
文章平均质量分 73
凶鸡
这个作者很懒,什么都没留下…
展开
-
放大镜效果
放大镜效果这里的放大镜效果是指当鼠标(手指)和页面(屏幕)中一个方框内的图片交互时,图片呈现放大效果,图片在框内显示的放大区域随鼠标(页面)位置的改变而改变演示链接:https://codesandbox.io/s/fangdajingxiaoguo-jxdfo源码:https://gitee.com/thisismyaddress/webpage-effects/tree/master/magnifier-effect以下我尝试了几种不同的实现方式移动图片框内的图片这里是通过改变图片框内的一原创 2021-08-05 23:28:52 · 1171 阅读 · 0 评论 -
利用box-shadow实现一个立体的按钮
一个立体的按钮改变按钮button的默认样式,创建一个立体的按钮这个效果是通过box-shadow实现这里要注意box-shadow是允许对同一个元素设置多个阴影的,需要用逗号分隔;多个阴影的层叠顺序是:写在前面的阴影将覆盖在后写的阴影上面演示链接CodePen演示链接:https://codepen.io/Zhao-Bocheng/pen/zYwrPEL源码<!DOCTYPE html><html lang="en"><head> <原创 2021-07-06 04:58:44 · 1262 阅读 · 0 评论 -
模态框
模态框模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应摘自百度百科先放上效果图:基本功能为点击窗口中间的发光按钮,使模态框出现,此时除了模态框部分,页面其他部分无法再点击,必须先点击确定对该模态框进行响应后才能进行其他操作。鼠标按住并拖动模态框标题处,可以实现模态框的拖拽跟随效果实现模态框效果的实现分为屏幕中间按钮和模态框确定按钮的点击事件的实现,以及模态框拖拽效果的实现。由于两个按钮的点击事原创 2021-06-30 02:31:38 · 8357 阅读 · 2 评论 -
简单的HelloWorld变色
简单的HelloWorld变色这个网页特效的基本功能就是点击左侧按钮会变色,点击右侧按钮恢复颜色在这个简单功能的基础上添加一些特效,用以练习CSS。添加的特效有:鼠标悬浮在按钮上时按钮边框会出现移动的效果按钮特效的实现需要借助按钮的两个伪元素::before和::after,以及伪类:hover还有过渡样式transition鼠标悬浮在按钮上时,边框上下的两个“空隙”会移动,实际上是两个和背景颜色一样颜色的伪元素斜方块在动,这就产生了好像边框发生变化的效果当颜色从原有颜色变为目标颜色时,原创 2021-06-29 20:25:37 · 391 阅读 · 0 评论 -
网页倒计时
网页倒计时制作一个简单的网页倒计时器。这个倒计时可以根据输入的截止时间进行倒计时,输入的截止日期数据会被缓存在本地存储(“deadlineDate”)(源码见文末)这里使用原生JS进行相关网页逻辑的编写,主要应用到的API有document.getElementById: 用于获取DOM元素节点,方便向节点填入数据并显示Window.setInterval(): 用于每隔一秒刷新一次显示的倒计时数据elem.addEventListener(): 用于绑定事件,这里只是用于绑定重置按钮的点击事原创 2021-06-25 15:25:54 · 7129 阅读 · 3 评论 -
CSS3动画属性练习-小熊跑跑
小熊跑跑通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果图片素材见文末代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor原创 2021-06-06 19:25:38 · 725 阅读 · 0 评论