CSS 3
关注
分享
扫一扫
文章平均质量分 59
草巾冒小子
你的打赏，正在生成下个技术方案
展开
-
CSS实现：background 渐变色+图片（含案例、代码、截图）
CSS实现：background 渐变色+图片（含案例、代码、截图）background实现背景：渐变色+图片（含案例、代码、截图）效果截图示下：演示效果，截图示下：代码如下：正确使用#色值，代码示下：/*大背景图区域*/.bg1{ background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(105deg, #F8FCFF 0%, #C4CBD5原创 2022-05-01 16:36:25 · 15416 阅读 · 0 评论 -
CSS3动画：wifi 焦点扩散渐变 （动画）
CSS3动画：焦点扩散渐变 （动画）效果图 · 演示：Demo 代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>焦点扩散渐变动画</title><style type="text/css">*, ::after, ::before { box-sizing: border-box;}.flash-icon {原创 2022-05-01 16:35:22 · 856 阅读 · 0 评论 -
text-overflow: ellipsis； 文本溢出隐藏
text-overflow: ellipsis; 文本溢出隐藏效果图：代码：.father{width:500px;}.words{ font-size: 15px; line-height: 15px; color: #333; display: block; width: 100%; height: 15px; ...原创 2021-05-31 20:28:38 · 336 阅读 · 0 评论 -
ps中如何同图层获取css代码
参考文章：嗲及详情原创 2021-05-31 20:22:48 · 298 阅读 · 0 评论 -
css flex布局 模型（CSS justify-content 属性） - 代码案例
css flex布局 模型（CSS justify-content 属性） - 代码案例效果图：.代码如下：.father{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}附：案例 · 效果 · 演示地址：原创 2021-05-24 21:52:32 · 289 阅读 · 0 评论 -
a 标签中 rel=“noopener noreferrer“属性的含义和功能
a标签：网页超链接中隐藏的钓鱼攻击先看一条代码：<a href="" rel="noopener noreferrer" >跳转到2页</a>1. target="_blank" 导致的钓鱼攻击target="_blank" 导致的钓鱼攻击2. window.opener.location为什么说window.opener.location.href恶意跳转？3. 资源统计：html a标签链接里面为什么要使用 rel="noopener norefe原创 2020-11-21 01:18:47 · 2695 阅读 · 1 评论 -
CSS文字颜色渐变 - 案例篇
（含效果图）CSS3文字颜色渐变 - 案例篇代码如下：<doctype HTML!><html><head></head><style>#openmorebtn .van-button__content span{font-size: 18px;font-weight:600;background: -webkit-gradient(linear, left top, right top, from(#FFEEC2), to(#ECB原创 2020-07-02 12:04:38 · 1199 阅读 · 0 评论 -
css文字排列 - 代码篇
css文字排列css3标准属性名值解释writing-modehorizontal-tb// 默认值：水平方向，从上到下writing-modevertical-rl// 垂直方向，从右向左writing-modehorizontal-lr// 垂直方向，从左向右一、单行 · 竖排二、多行 · 竖排三、单行横向（+90°旋转） · 整...原创 2020-05-31 22:27:45 · 3040 阅读 · 0 评论 -
css文字溢出部分在另一个div显示（代码篇）
css文字溢出部分在另一个div显示原创 2020-05-31 22:22:14 · 2977 阅读 · 0 评论 -
前端代码：html、css（图文混排）文字环绕 - 案例篇
密码双向加密原创 2020-05-28 00:34:17 · 2740 阅读 · 0 评论 -
原生Javascript 操作 css类名 - 踩坑篇
原生Javascript 操作 css类名不建议用 .class ；建议用#id类名效果图示下：案例 · 代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript操作类名.html</title> <style type="text/css"> .hide{display: none;}原创 2020-05-25 01:51:33 · 712 阅读 · 0 评论 -
（图片抠图片）mask-img 属性（透视抠图）【含效果图、代码】 - 案例篇
图片抠图片 mask-img 属性文章主要代码提示（css属性）：mask-imagemask-modemask-repeatmask-positionmask-clipmask-originmask-sizemask-typemask-composite原创 2020-04-29 01:30:55 · 2223 阅读 · 0 评论 -
（自定义组件）通用- X轴横向：溢出滚动 （含代码）- 案例篇
移动端（自定义组件）- X轴横向：溢出滚动 （含代码）- 案例篇效果截图：实例代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,...原创 2020-04-26 17:31:02 · 1036 阅读 · 0 评论 -
html中css如何引用自定义字体 - 案例篇
html引用自定义字体 - 设置篇网页中不同的字体，代码是怎么定义的？怎么引用外来字体文件？原创 2020-04-16 17:19:44 · 3777 阅读 · 0 评论 -
css使图片变成黑白效果 - 代码篇
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;lonk/原创 2020-04-14 23:49:31 · 959 阅读 · 1 评论 -
文字color颜色渐变（可一直变换） - 代码篇
文字color颜色渐变（可一直变换） - 代码篇一、应用场景 · 举例：https://www.iconfont.cn/ 站内的 【字体图标】【如下图1所示】某些客户要求的 “炫酷拽”的宣传推广页面 的文字特效等等应用效果图 · 截图示下：二、html 案例：（可一直变换）<!DOCTYPE html><html><head>&l...原创 2020-04-09 17:30:10 · 4568 阅读 · 0 评论 -
鼠标样式：cursor属性值（含自定义光标图案） - 代码篇
cursor属性值（光标图案） - 代码篇1. 常用取值 · 举例：属性值1234567891011121314151617···cursor:AutotextCrosshaircellDefaultPointerMovee-resizene-resizenw-resizen-resizese-resizesw-...原创 2020-04-08 14:28:26 · 4236 阅读 · 0 评论 -
CSS 文字垂直居中自适应 - 代码篇
CSS 文字垂直居中自适应 - 代码篇引言<div>内的文字能在图片缩放的同时，自动居中（自适应居中），详情看下列代码。效果图：解决办法 · 代码示下：/*CSS代码*/.h3{position: absolute;top:0;left:0;width:100%;height:100%;font-size: 14px;font-weight: bold;tex...原创 2019-12-19 15:39:13 · 3787 阅读 · 0 评论 -
CSS3实现button:hover时background-color从左慢慢移动到右边
CSS3实现button:hover时background-color从左慢慢移动到右边<!DOCTYPE html><html lang="en"> <head> <style> .btn{ position: relative; ...转载 2019-10-24 14:55:09 · 2335 阅读 · 0 评论 -
css背景图background - 多背景定义
css背景图background - 多背景定义以上就是关于“ css背景图background - 多背景定义” 的全部内容。原创 2019-10-24 14:37:39 · 502 阅读 · 0 评论 -
transition:background-color .3s 背景色 - 渐变效果
-webkit-transition:background-color .3s;transition:background-color .3s;原创 2019-10-23 17:01:40 · 6965 阅读 · 3 评论 -
translateY鼠标hover触发动（上下移动） - 代码案例篇
translateY鼠标hover触发动画 - 上下移动效果图截图：参考代码：.first-screen ul li:hover { border: 2px solid #08f; -webkit-transform: translateY(-8px); transform: translateY(-20px); -webkit-transition:...原创 2019-10-23 16:59:33 · 1710 阅读 · 2 评论 -
svg动画 - 在线编辑器
SVG前言：资源：svg动画 - 在线编辑器最基本的一个静态SVG（不含动画）SVG矢量动画机制应用举例：http://www.sohu.com/a/242325373_470009原创 2019-10-23 16:33:55 · 7196 阅读 · 0 评论 -
css文本省略（······）行高错位（bug）- 解决办法
应用css文本省略（······）属性：-webkit-line-clamp: 3; 导致：行高错位。（F12查看发现css属性line-height的值并没变，但为什么浏览器显示文本的实际行距却变小？）样式bug · 截图说明：上面的文字仅仅只是设置了line-height属性；因为： 没有设置height行高属性，所以： 在缩放的时候，导致了这种bug问题现象。这里示例以下...原创 2019-04-02 10:54:36 · 1409 阅读 · 0 评论 -
如何设置（样式渐变）transition
如何设置（样式渐变）transition样式渐变： -webkit-transition: .1s; transition: .1s; 以上就是关于“ 如何设置（样式渐变）transition ” 的全部内容。...原创 2019-04-26 10:18:22 · 847 阅读 · 0 评论 -
jquery实现：返回顶部（动画·代码精简版）- 代码篇
返回顶部（动画·代码）精简代码如下：<script type="text/javascript"> $(document).ready(function(){ $('#goToTop a').click(function(){ $('html,body').animate({scrollTop:0},'slow'); ...原创 2019-05-31 16:55:10 · 790 阅读 · 0 评论 -
css3图像边框：border-image - 代码篇
效果图：演示代码 · 如下：<!DOCTYPE html><html> <head> <style> div{ border:15px solid transparent; width:300px; padding:10px 20px; } #round{ -moz-borde...原创 2019-05-31 17:30:18 · 1537 阅读 · 0 评论 -
经历了px、em之后，用 rem 适配屏幕
文章源自：snook截屏如下：原创 2019-09-19 14:32:43 · 386 阅读 · 0 评论 -
border每个边框的阴影（box-shadow属性）
分别设置border四个边框为不同阴影（box-shadow属性）效果图对比：代码设置：设置前的代码box-shadow: none;设置后的代码box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/ -10px 0px 0px 0px #3bee17, /*左边阴影 绿...原创 2019-10-10 15:09:39 · 17821 阅读 · 0 评论 -
纯CSS自定义button按钮的点击特效
css3的buttton按钮的背景点击特效代码如下：&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;原创 2018-06-23 16:27:24 · 23594 阅读 · 0 评论 -
css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇
css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇1. 水平方向2. 垂直方向：.name{padding-left: 46px;padding-top: 15px;font-size: 18px;color: #333;position: relative;}.name:before{position: ...原创 2019-03-27 09:52:40 · 9197 阅读 · 0 评论 -
文字滚动插件（css3动画）- 代码篇
文字滚动插件（css3动画）- 代码篇templete代码如下：&lt;div class="list"&gt; &lt;div class="rowup"&gt; &lt;div class="item"&gt;&lt;span&gt;桑法元转载 2019-03-21 23:15:09 · 1367 阅读 · 0 评论 -
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头，完成拍照实时上传 项目开发中，偶尔会遇到网页中调用手机摄像头，通过相册选择或直接实时拍照的方式，完成图片上传的功能型需求。今天，就通过一个小的案例，演示一下完整的实现流程【效果截图省略】。案例全部代码，示下：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &am原创 2018-07-05 16:55:11 · 39274 阅读 · 7 评论 -
H5如何调用手机摄像头？
H5调用手机摄像头 那么问题来了：该如何调用？ 请看代码： &amp;amp;lt;input type=&amp;quot;file&amp;quot; accept=&amp;quot;image/*&amp;quot; capture=&amp;quot;camera&amp;quot;&amp;amp;gt;下面是开发时遇到的问题和疑问：如何调原创 2018-07-05 16:55:03 · 6120 阅读 · 1 评论 -
取消input、textarea选中后的默认边框样式
禁用输入框、文本框轮廓线：outline属性 某些浏览器下，输入框即使被设置了圆角，边框的矩形轮廓仍然可见。 例如，谷歌浏览器，严重影响页面显示效果。 截图如下： 此时，我们就要禁用input、textarea的边框属性。代码如下：input{outline: none;}textarea{outline: none;}设置了边框属性为none ，就不...原创 2018-07-05 16:54:19 · 18991 阅读 · 0 评论 -
如何解决IE6双边距问题？
解决IE6中浮动元素的margin双倍边距问题IE6中，第一个浮动到父元素边上的元素，如果含有该方向的margin值，那么margin会以双倍显示。即：浮动元素的左边距在IE6上为所设定的左边距的两倍。这个问题只会发生在浮动行的第一个浮动元素上。准确的说：应该是每一行的第一个元素都会受此影响。为了解决该问题，需要给浮动元素添加属性display: inline，即可解决。除...原创 2018-07-02 10:15:16 · 1268 阅读 · 0 评论 -
css hack惯用手法
什么是css hack？原创 2018-06-28 15:58:07 · 506 阅读 · 0 评论 -
css实现发光的input输入框
鉴于前期工作总结，简单总结一下开发中经常遇到的发光的输入框的UI视觉体验。 聚焦input文本框：边框外围背景伴有明显的动画效果，呈现为虚化，雾化效果。效果图截图：案例代码示下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2018-07-02 11:20:24 · 1545 阅读 · 0 评论 -
css禁止鼠标复制文本的属性：user-select
CSS3 禁止鼠标复制文本的属性：user-select想要选中并复制文本内容，但是根本选不中文本？ css3 UI规范中新增的一个属性；语法：user-select： none | text | all | element 默认值：text 适用于：除替换元素外的所有元素 继承性：无 动画性：否 计算值：指定值 功能：用来控制文...原创 2018-07-05 10:08:22 · 2280 阅读 · 0 评论 -
filter滤镜实现img图片的CSS蒙版效果、模糊效果
filter滤镜实现img图片的CSS蒙版效果、模糊效果 项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。 这里将会用到：filter这一属性。 文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。下面我们就来总结一下，这层模糊的蒙版效果的实现方法。首先看一下效果图。1. 效果图...原创 2018-06-23 16:28:34 · 4502 阅读 · 0 评论