第四界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. ...
随机推荐
- 6 MySQL--表--完整性约束
参考:https://www.cnblogs.com/alice-bj/p/8824693.html 完整性约束: http://www.cnblogs.com/linhaifeng/articles ...
- 【317】python 指定浏览器打开网页 / 文件
一.python 打开浏览器的方法: 1. startfile方法(打开指定浏览器) import os os.startfile("C:\Program Files\internet ex ...
- go 算法
题目: 请实现一个算法,确定一个字符串的所有字符[是否全都不同].这里我们要求[不允许使用额外的存储结构].给定一个string,请返回一个bool值,true代表所有字符全都不同,false代表存在 ...
- 使用.sig签名验证文件
Linux下载文件的时候,由于网络等原因,下载的文件可能不完整,对于别有心机的人可以更改文件,这就需要我们对文件的完整性进行验证.这里以securityonion-14.04.5.2.iso为例进行验 ...
- PLSQL优化基础和性能优化 (学习总结)
PLSQL优化基础和性能优化 (学习总结) 网上有一篇关于PLSQL优化的文章,不错,个人根据自己的经验再稍加整理和归纳,总结PLSQL优化和性能调优 适合有一定PLSQL基础,需要进一步提高的学友看 ...
- 从值栈获取List集合
-------------------siwuxie095 从值栈获取 List 集合 1.具体步骤 (1)在 Action 中向值栈放 List 集合 (2)在 JSP 页面中从值栈获取 List ...
- MD5加密算法原理及其应用
MD5是一个安全的散列算法,输入两个不同的明文不会得到相同的输出值,根据输出值,不能得到原始的明文,即其过程不可逆:所以要解密MD5没有现成的算法,只能用穷举法,把可能出现的明文,用MD5算法散列之后 ...
- tomcat 403 forbidden
server.xml和tomcat-users.xml都是设置于过了,还是403,最后发现context.xml中多了一行 <Valve className="org.apache.c ...
- C++ std::thread
std::thread Defined in header class thread The class thread represents a single thread of execution. ...
- java工具类 --千分位方法
/** * 千分位方法 * @param text * @return */ public static String fmtMicrometer(String text) { DecimalForm ...