第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css网格背景</title>
<style type="text/css">
body{ background-color: #451F46}
div{margin:20px;}
.stripe1{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}
.stripe2{
width: 250px;
height: 150px;
margin: 50px;
background-color: #655;
background-image: radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
}
.stripe3{
width: 250px;
height: 150px;
margin: 50px;
background-color: #655;
background-image: radial-gradient(tan 30%,transparent 0),
radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
.stripe4{
width: 250px;
height: 150px;
margin: 50px;
background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-color: #eee;
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
</style>
</head>
<body>
<div class="stripe1"></div>
<div class="stripe2"></div>
<div class="stripe3"></div>
<div class="stripe4"></div> </body>
</html>
效果图：
2.遮罩
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>透明遮罩</title>
<style type="text/css"> .trans {
/*transition*/
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
} .test_outer {
width: 320px;
height: 480px;
margin: 1em auto;
position: relative;
overflow: hidden;
} .test_cover {
width: 60px;
height: 60px;
border: 480px solid rgba(0, 0, 0, .45);
border-radius: 50%;
position: absolute;
} .test_cover_pos1 {
left: -227px;
top: -478px;
} .test_cover_pos1:after {
content: '第一个';
margin: 16px 0 0 -140px;
} .test_cover_pos2 {
left: -447px;
top: -378px;
} .test_cover_pos2:after {
width: 140px;
content: '第二个';
margin: 16px 0 0 60px;
} .test_cover_pos3 {
left: -337px;
top: -48px;
} .test_cover_pos3:after {
content: '第三个';
margin: -20px 0 0 -20px;
white-space: nowrap;
} .test_cover_pos1:after,
.test_cover_pos2:after,
.test_cover_pos3:after {
color: #fff;
font-family: '微软雅黑';
text-shadow: 1px 1px rgba(0, 0, 0, .35);
position: absolute;
}
</style>
</head> <body>
<div class="test_outer">
<span id="testCover" class="test_cover test_cover_pos1 trans"></span>
<img src="http://img.d1xz.net/d/2018/09/5b90cde1ceab0.jpg" border="0" />
</div>
<script type="text/javascript">
(function(stepIndex) {
var objStep = document.getElementById("testCover");
var funStep = function() {
objStep.className = objStep.className.replace(/\d/, (stepIndex + 1));
stepIndex++;
if (stepIndex > 2) {
stepIndex = 0;
}
setTimeout(funStep, 3000);
};
setTimeout(funStep, 3000);
})(1);
</script>
</body> </html>
效果图：
3.透明遮罩
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>透明遮罩</title>
<style type="text/css"> body{background:url(images/img.jpg) top center no-repeat; } .editor-shell {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
pointer-events: none;
z-index: 1;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}
</style>
</head> <body>
<div class="wrap">
<div class="editor-shell" id="demo"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).on("mousemove", function(event) {
$("#demo").css({
"top": event.pageY,
"left": event.pageX
});
});
</script>
</body> </html>
效果图：
4.颜色拾取器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>颜色拾取器</title>
<style type="text/css">
body {
background-color: #451F46
} .rainbow {
width: 20px;
height: 150px;
background-image: linear-gradient( -180deg,
#f00 0%,
#f0f 15%,
#00f 33%,
#0ff 49%,
#0f0 67%,
#ff0 84%,
#f00 100%)
} .rainbow-block {
width: 150px;
height: 150px;
background-image: linear-gradient(
180deg,rgba(255,255,255,0) 0%,
rgb(255,255,255) 100%),
linear-gradient( -90deg,
#f00 0%,
#f0f 15%,
#00f 33%,
#0ff 49%,
#0f0 67%,
#ff0 84%,
#f00 100%)
}
</style>
</head> <body>
<div class="rainbow"></div>
<div class="rainbow-block"></div>
</body> </html>
效果图：
5.文字颜色渐变
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>背景网格</title>
<style type="text/css">
.demo {
text-align: center;
margin: 100px auto 0;
background-clip: text;
background-image: linear-gradient( 146.976deg,
rgb(107, 25, 207) 0%,
rgb(242, 255, 0) 21.1765%,
rgb(31, 222, 216) 35.8824%,
rgb(255, 0, 153) 71.4706%,
rgb(0, 0, 0) 100%);
font-size: 70px;
font-weight: 700;
/*文字填充渐变色*/
-webkit-background-clip: text;
color: transparent;
} .words {
margin: 50px auto;
font-size: 100px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: transparent;
background: url(images/img.jpg) no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-clip: text;
/*文字描边*/
-webkit-text-fill-color:transparent;
-webkit-text-stroke:3px red;
}
</style>
</head> <body>
<div class="demo">文字颜色渐变</div>
<div class="words"> 文字图案填充、描边</div>
</body> </html>
效果图：
6.标题溢出渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
a{ color: #333; text-decoration: none; }
.demo{ width: 500px; height: 400px; margin:0 auto; background-color: red}
.demo a{
width: 260px;
height: 30px;
line-height: 30px;
font-size: 20px;
display: block;
overflow:hidden;
/*text-overflow: ellipsis;
white-space: nowrap;*/
position: relative;
}
.demo a:after{
content: "";
background: linear-gradient(to right,rgba(255, 255, 255, 0), #fff) no-repeat;
position: absolute;
right: 0;
width: 20px;
height: 30px;
} </style>
</head>
<body>
<div class="demo">
<a href="波浪.html">维尼亚维尼亚官方海外旗舰店</a>
</div>
</body>
</html>
效果图：
css3字渐变：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .text-gradient {
display: inline-block;
color: green;
font-size: 10em;
font-family: '微软雅黑';
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} ;
</style>
</head> <body>
<h2 class="text-gradient">渐变色</h2>
</body> </html>
效果图：
css3文字渐变色2：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<style>
.gradient-text {
background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h3 class="gradient-text">文字渐变</h3>
</body>
</html>
效果图：
body{background: #}
.index_form_title{ font-weight: ; font-size: 80px; text-align: center;
background-image: -webkit-linear-gradient(bottom, rgb(, , ), rgb(, , ));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
伪元素渐变：
<p class="index_form_title" data-text="渐变色"></p>
.index_form_wrap{ background: # }
.index_form_title{ position: relative; font-weight: ; font-size: 20px; height: 50px; }
.index_form_title::after {
content: attr(data-text);
color: #fff;
position: absolute;
left: ;
z-index: ;
-webkit-mask-image: -webkit-gradient(linear, , bottom, from(rgb(, , )), to(rgba(, , , )));
}
css3径向渐变
.radial-gradient {
width: 400px; height: 200px;
background: radial-gradient(yellow, red);
}
原链接：
https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/
https://www.runoob.com/css3/css3-gradients.html
第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等的更多相关文章
- css实现网格背景
只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格. 1. ...
- CSS 3学习——box-sizing和背景
box-sizing 在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高,元素实际的尺寸是margin + border + padding + 内容区. CSS 3(截止 ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- [CSS] css的background及多背景设置
问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...
- [css 揭秘] ：CSS揭秘 技巧（五）：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- CSS基本属性—文本属性和背景属性
一.CSS常用文本属性 [css中的颜色表示方式] 1.直接使用颜色的单词表示:red.green.blue 2.使用颜色的十六进制表示:#ff0000,#00ff00: 六位数,两两 ...
- 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）
1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = ...
- CSS页面布局与网格（下）
3.二维布局:CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序.位置和大小而定义了一组CSS属性. 被设值为display: grid的元素叫网格容器 ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
随机推荐
- CPU GPU FPU TPU 及厂商
1,AMD 既做CPU又做显卡2,Inter 全球最大的CPU厂商,GPU,FPGA3,NVIDA 人工智能起家的公司,且一直在做,显卡最出名,CUDA让N卡胜了AMD CPU上 AMD - Inte ...
- Python time、datetime
简介: 记录一下 Python 如何获取昨天.今天.明天时间及格式化. 1.今天 In [1]: import time In [2]: print time.strftime('%Y.%m.%d', ...
- NotePad++替换行前、行后空格，替换空行
用 Notepad++ 打开,把每一个将要放在表中单元格的内容放一行(注: ^ 代表行首 $ 代表行尾) 去除行尾空格和空白行:按CTRL+H 选择正则表达式– 查找目标:\s+$ 替换为空 去除行首 ...
- PLSQL优化基础和性能优化 (学习总结)
PLSQL优化基础和性能优化 (学习总结) 网上有一篇关于PLSQL优化的文章,不错,个人根据自己的经验再稍加整理和归纳,总结PLSQL优化和性能调优 适合有一定PLSQL基础,需要进一步提高的学友看 ...
- 给我们的Empty Object加个图标
Gizmos.DrawIcon (transform.position, "1.png", true);
- 存储过程返回update结果集和insert主键
update teacher set name ='111' where id in(286,289);print @@rowcount;--或select将查出,是@@rowcount,不是@row ...
- 微信小程序-滑动视图注意事项
真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...
- 286 walls and gate最近的出口
［抄题］: 您将获得一个使用这三个可能值初始化的 m×n 2D 网格.-1 - 墙壁或障碍物. 0 - 门. INF - Infinity是一个空房间.我们使用值 2 ^ 31 - 1 = 21474 ...
- Java Thread系列（一）线程创建
Java Thread系列(一)线程创建 Java 中创建线程主要有三种方式:继承 Thread.实现 Runnable 接口.使用 ExecutorService.Callable.Future 实 ...
- linux 修改oracle字符集
问题描述:同事在Linux下安装的Oracle,默认的字符集没有修改,使用的是WE8ISO8859P1,不能够支持中文, 问题表现为,客户端录入的中文数据可以显示,提交之后再查询出来后中文会显示为?? ...