web前端开发 - 推荐的文章 - 第37页

javascript实现异形滚动轮播

效果：完整代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...

0
0
admin
发布于 2020-07-08 21:55
阅读 ( 476 )

javascript实现切割轮播效果,从左到右切换

效果：完整demo代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://...

0
0
admin
发布于 2020-07-08 21:42
阅读 ( 438 )

CSS设置首字放大下沉及段首缩进2字符

1、CSS首字放大下沉对首字进行放大下沉，需用到css的伪元素：first-letter。 <!doctype html><html><head><style type="text/css">.text{font-family:Microsoft Y...

0
0
王凯
发布于 2020-07-07 17:57
阅读 ( 589 )

CSS自定义原生下拉列表的样式

下拉列表的默认样式：下面介绍自定义下拉列表的两种方法：方法一：用纯CSS自定义下拉列表的样式。原理：将默认的下拉列表样式清除，自定义样式，并附上一张向右对齐的小箭头...

0
0
王凯
发布于 2020-07-07 17:17
阅读 ( 515 )

CSS实现单、多行文本溢出时显示省略号

1、单行文本溢出： (1)截断溢出文本： ---同时设置以下属性： width:*px;overflow: hidden;text-overflow:clip; white-space: nowrap; (2)溢出文本显示省略号： ---同时设置以下属...

0
0
王凯
发布于 2020-07-07 17:11
阅读 ( 583 )

如何用CSS自定义下划线的样式

问题描述：使用:first-letter将首字母的font-size增大后，下划线text-underline也会变粗。 eg： <!doctype html><html><head><style type="text/css">.text{te...

0
0
王凯
发布于 2020-07-07 16:55
阅读 ( 608 )

使用html2canvas 页面转图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面转图片</title> <link rel="stylesheet" href="https://c...

0
0
全易
发布于 2020-07-07 13:28
阅读 ( 746 )

CSS+jQuery实现点击展开折叠菜单

<!DOCTYPE html> <html> <head> <title>折叠菜单</title> <style> body{ background:grey; font-family:Microsoft Yahei; color:whi...

0
0
李沁雪
发布于 2020-07-07 12:42
阅读 ( 729 )

JavaScript阻止事件冒泡与事件捕获

1、事件冒泡在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body οnclick="alert('body')"><div οnclick="alert('div')"><a href="" οn...

0
0
李沁雪
发布于 2020-07-07 12:34
阅读 ( 737 )

CSS3动画使用-transform: rotate（旋转） | scale（缩放） | translate（移动） | skew（倾斜）

1、CSS3 transform属性应用于2D或3D转换，允许对元素进行倾斜、移动、缩放或旋转。 2D转换元素能够改变元素 x 和 y 轴，3D转换元素还能改变其 Z 轴。属性： none定义不进行转换。matr...

0
0
李沁雪
发布于 2020-07-07 12:05
阅读 ( 769 )

Css实现图片斜切效果

css mask的原理：只会把遮罩图里透明像素所对应的原图部分进行隐藏。渐变图作为mask，置于另一张图片上面。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...

0
0
李沁雪
发布于 2020-07-07 11:51
阅读 ( 789 )

windows下搭建Vue.js开发环境教程

1、安装node.js node.js的官方地址为：https://nodejs.org/en/download/。根据windows版本后，选择要下载的安装包，下载完毕，按照windows一般应用程序，一路next就可以安装成功，建议不要安...

0
0
李沁雪
发布于 2020-07-07 11:41
阅读 ( 741 )

HTML5离线存储的使用及原理注意事项

在用户没有与因特网连接时，可以正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件。原理： HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，...

0
0
李沁雪
发布于 2020-07-07 11:38
阅读 ( 817 )

javascript实现视频弹幕的效果

简单版本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; he...

0
0
admin
发布于 2020-07-06 22:42
阅读 ( 498 )

javascript实现弹幕墙效果

刚开始入门前端，想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什么吧？”以提示用户在此输...

0
0
admin
发布于 2020-07-06 22:25
阅读 ( 528 )

jquery实现视频或直播弹幕效果

本文实例为大家分享了jquery直播弹幕展示的完整代码，供大家参考，具体内容如下理论知识：实现效果主要涉及jq对节点的操作，以及动画函数的使用… 思路： 1.获取到评论文本框的值...

0
0
admin
发布于 2020-07-06 22:14
阅读 ( 540 )

CSS实现鼠标移到图片上，图片变亮效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3动画-图片开关灯阴影效果</title><style type="text/css">ul,li{list-style: none;}...

0
0
admin
发布于 2020-07-06 21:45
阅读 ( 500 )

解决CSS中<li>之间的空白间隔问题

有时候，我们需要将<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻<li>之间会出现8px的空白间隔，不是margin也不是padding。 <html><he...

0
0
李沁雪
发布于 2020-07-06 17:41
阅读 ( 749 )

CSS中的visibility: hidden | collapse 与display: none的区别

对于CSS里的visibility属性，通常其值被设置成visible或hidden。 visibility: hidden相当于display:none，能把元素隐藏起来，但两者的区别在于： ①　display:none 元素不再占用空间。...

0
0
李沁雪
发布于 2020-07-06 17:35
阅读 ( 867 )

使用纯CSS绘制圆形、椭圆形、菱形、三角形

1、圆形： width: 50px;height: 50px;border-radius: 50%; // 50%~100%之间都行background: pink; 2、半圆形：（以左圆形为例） width: 50px;height: 100px;border-radius: 50px 0 0 50px;...

0
0
李沁雪
发布于 2020-07-06 13:09
阅读 ( 751 )