CSS3新特性应用之用户体验
时间:2022-04-22
本文章向大家介绍CSS3新特性应用之用户体验,主要内容包括一、光标、二、扩大热区、三、自定义复选框、四、通过阴影来弱化背景、五、通过模糊来弱化背景、六、滚动提示、七、图片对比控件、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一、光标
- 新增加not-allowed光标,不允许访问
- 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用
cursor:none
即可。 - 完整代码:
curosr: url(transparent.gif');
cursor: none;
二、扩大热区
- 应用在小按钮的情况下,不好被鼠标点击到
- 代码如下:
.btn{
position: relative;
cursor: pointer;
}
.btn:after{
position: absolute;
content: '';
top:-10px;
right: -10px;
bottom: -10px;
left: -10px;
}
三、自定义复选框
- 系统自带复选框美化
- 利用css3提供的:checked伪类选择器实现
- 宽、高、对齐等设置单位最好用em,让按钮变得更为灵活
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label::before{
content: 'a0'; /*不换行空格*/
display: inline-block;
background: silver;
border-radius: .2em;
margin-right: .2em;
width: .8em;
height: .8em;
line-height: .65em;
text-indent: .15em;
}
input[type="checkbox"]:checked + label::before{
content: '2713';
background: yellowgreen;
}
</style>
</head>
<body>
<input type="checkbox" id="anesome"/>
<label for="anesome">anesome</label>
</body>
- 开关按钮的实现
- 伪类选择器 + 修饰label元素实现
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label{
display: inline-block;
padding: .3em .5em;
background: #ccc;
border: 1px solid rgba(0, 0, 0, .2);
background-image: linear-gradient(#ddd,#bbb);
text-align: center;
border-radius: .3em;
box-shadow: 0 1px white inset;
text-shadow: 0 1px 1px white;
}
input[type="checkbox"]:checked + label{
box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;
border-color: rgba(0, 0, 0, .3);
background: #bbb;
}
</style>
</head>
<body>
<input type="checkbox" id="anesome"/>
<label for="anesome">anesome</label>
</body>
四、通过阴影来弱化背景
- 传统方式,增加一个背景元素和一个内容元素实现,背景遮罩挡住所有,内容元素展示一切,简单不做示例。
- body上增加一个伪元素,与传统方式一样,只是减少背景元素而已
- 重点介绍box-shadow实现
- 实现方式让内容元素产生一个巨大的阴影,不偏移也不模糊
- H5单位介绍(利用单位解决大屏遮罩层显示不全的问题)
- em:相对父级的font-size,1em=16px;
- rem:相对根元素的font-size
- vh和vw:IE10 + 和现代浏览器 1vh = viewport的高的1%,vw相同;
- vmax和vmin
- ie10 + 和现代浏览器都支持vmin,ie全部都不支持vmax
- vmin表示vh和vw中比较小的值
- vmax表示vh和vw中比较大的值
- 1vmax表示1vh和1vm之间较大的值
- ch和ex
- ie9+和现代浏览器都支持,依据当前font-family的相对单位
- ch:字符0的宽度
- ex:小写字符x的高度
- 当页面有滚动条时,遮罩层的边缘会露出来,除非用position:fixed定位,但又防止页面本身就有滚动条
- box-shadow不能产生交互事件(独立元素的遮罩层),只能在视觉上带来引导
- box-shadow只限于没有滚动条 + 只做引导层的场景。
- 示例代码:
.wrap{
margin: 0 auto;
width: 200px;
height: 100px;
box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);
}
五、通过模糊来弱化背景
- 主要利用blur来模糊背景
- 由于blur应用的元素,相对所有的子元素都会被模糊,所以除高亮元素之外其他元素都包含在一个main元素下面。
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
main{
transition: .6s;
}
main.de-emphasized{
filter: blur(2px);
}
main.de-emphasized + dialog{
display: block;
}
</style>
</head>
<body>
<main class="de-emphasized" >在图6-16 中可以看到,这已经是一个巨大的进步了。不过,现在这个
模糊效果是突然出现的,看起来不是那么自然,反而给人一种突兀的感觉。
由于CSS 滤镜是可以设置动画的,我们可以让页面背景的模糊过程以过渡
动画的形式来呈现。</main>
<dialog>dialog in html</dialog>
</body>
六、滚动提示
- 利用radial-gradient做圆形径向渐变
- radial-gradient(center,shape,size,start-color,...,stop-color);
- center:是一个坐标值,表示原点位置,默认为50% 50%
- shape:默认为ellipse(椭圆),可以设置为circle(正圆)
- size:四个值,closest-side(最近边),farthest-side(最远边),closest-corner(最近角),farthest-corner(最远角)
- 角度都是离圆心最近与最远的角,四个角度
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;
background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0, 0, 0, .2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;
}
.radi{
background: -webkit-radial-gradient(40% 37%, closest-corner, red, grey);
width: 200px;
height: 100px;
}
.radi02{
margin-top: 10px;
background: -webkit-radial-gradient(40% 37%, farthest-corner, red, grey);
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<ul class="wrap" >
<li>Ada Catlace</li>
<li>Alan Purring</li>
<li>Schrödingcat</li>
<li>Tim Purrners-Lee</li>
<li>WebKitty</li>
<li>Json</li>
<li>Void</li>
<li>Neko</li>
<li>NaN</li>
<li>Cat5</li>
<li>Vector</li>
</ul>
<div class="radi"></div>
<div class="radi02"></div>
</body>
七、图片对比控件
- 利用resize这个css3属性,可以设置none(不可改变)、horizontal(水平)、vertical(垂直)、both(所有)三个值。
- both时,会在右下角有一个可改提示,其他没有。
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
display: inline-block;
}
.wrap > div{
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
resize: horizontal;
overflow: hidden;
}
.wrap > div::after{
position: absolute;
content: '';
bottom: 0; right: 0;
width: 12px;
height: 12px;
cursor: ew-resize;
padding: 5px;
background: linear-gradient(-45deg,white 50%, transparent 0);
background-clip: content-box;
}
.wrap img{
display: block;
user-select: none;
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img src="../img/cat-alpha.png" alt="">
</div>
<img src="../img/cat.png" alt="">
</div>
</body>
- 利用h5的range标签实现,需要Js的配合,使用其oninput事件监听range组件改变的值。
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
display: inline-block;
}
.wrap > div{
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
overflow: hidden;
}
.wrap img{
display: block;
user-select: none;
}
input[type="range"]{
position: absolute;
bottom: 10px;
width: 100%;
user-select: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class ="img">
<img src="../img/cat-alpha.png" alt="">
</div>
<img id="destImg" src="../img/cat.png" alt="">
</div>
<script>
window.onload = function(){
var rang = document.createElement('input');
rang.type='range';
rang.min="0";
rang.max="100";
var div = document.getElementsByClassName('img')[0];
var wrap = document.getElementsByClassName('wrap')[0];
rang.oninput = function(e){
div.style.width = this.value + '%';
}
debugger;
wrap.appendChild(rang);
};
</script>
</body>
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- codeforces 1382C1(思维)
- java学习原理篇|如何学习使用一个新工具
- codeforces 545C(贪心)
- codeforces 1272D(dp)
- codeforces 1203D2(贪心)
- HDOJ 2112(最短路)
- codeforces 1384A(构造)
- codeforces 982C (dfs)
- POJ 2493 (map)
- codeforces 1417C(思维)
- codeforces 1256C (贪心+构造)
- codeforces 722C(带权并查集+反向思维)
- codeforces 1144D(思维)
- 经典的SparkSQL/Hive-SQL/MySQL面试-练习题
- codeforces 1249E(dp)