30秒CSS精华方法摘取分析,赏析,以及应用场景
【摘要】
网上有个30秒的项目,里面有很多简单封装的js方法以及 一些css的特殊效果封装.在这里我来为大家摘取其中几个写的很好,应用场景很高的方法,以此来抛砖引玉
创建圆形使用一个正方形并且设置border-radius:50%即可
清除浮动 在父节点 .clearfix::after{conte...
网上有个30秒的项目,里面有很多简单封装的js方法以及 一些css的特殊效果封装.在这里我来为大家摘取其中几个写的很好,应用场景很高的方法,以此来抛砖引玉
创建圆形使用一个正方形并且设置border-radius:50%即可
清除浮动 在父节点 .clearfix::after{content:'',display:block,clear:both}
等宽高比 (给定可变宽度的元素，它将确保其高度以响应的方式保持成比例)
-
<div class="constant-width-to-height-ratio"></div>
-
-
.constant-width-to-height-ratio {
-
background: #333;
-
width: 50%;
-
}
-
.constant-width-to-height-ratio::before {
-
content: '';
-
padding-top: 100%;
-
float: left;
-
}
-
.constant-width-to-height-ratio::after {
-
content: '';
-
display: block;
-
clear: both;
-
}
自定义滚动条:
-
<div class="custom-scrollbar">
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
-
</div>
-
/* Document scrollbar */
-
::-webkit-scrollbar {
-
width: 8px;
-
}
-
::-webkit-scrollbar-track {
-
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-
border-radius: 10px;
-
}
-
::-webkit-scrollbar-thumb {
-
border-radius: 10px;
-
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-
}
-
/* Scrollable element */
-
.some-element::webkit-scrollbar {
-
}
自定义文本选择 使用伪类
::selection
设置选择的字体颜色,背景 自定义变量
-
<p class="custom-variables">CSS is awesome!</p>
-
-
:root {
-
--some-color: #da7800;
-
--some-keyword: italic;
-
--some-size: 1.25em;
-
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
-
}
-
.custom-variables {
-
color: var(--some-color);
-
font-size: var(--some-size);
-
font-style: var(--some-keyword);
-
text-shadow: var(--some-complex-value);
-
}
注(浏览器支持率 88.0 %) 禁用选择使用
user-select: none;
环形加载器
-
@keyframes donut-spin {
-
0% {
-
transform: rotate(0deg);
-
}
-
100% {
-
transform: rotate(360deg);
-
}
-
}
-
.donut {
-
display: inline-block;
-
border: 4px solid rgba(0, 0, 0, 0.1);
-
border-left-color: #7983ff;
-
border-radius: 50%;
-
width: 30px;
-
height: 30px;
-
animation: donut-spin 1.2s linear infinite;
-
}
渐变文本
-
.gradient-text {
-
background: -webkit-linear-gradient(pink, red);
-
-webkit-text-fill-color: transparent;
-
-webkit-background-clip: text;
-
}
鼠标光标渐变跟踪
-
<button class="mouse-cursor-gradient-tracking">
-
<span>Hover me</span>
-
</button>
-
-
.mouse-cursor-gradient-tracking {
-
position: relative;
-
background: #7983ff;
-
padding: 0.5rem 1rem;
-
font-size: 1.2rem;
-
border: none;
-
color: white;
-
cursor: pointer;
-
outline: none;
-
overflow: hidden;
-
}
-
.mouse-cursor-gradient-tracking span {
-
position: relative;
-
}
-
.mouse-cursor-gradient-tracking::before {
-
--size: 0;
-
content: '';
-
position: absolute;
-
left: var(--x);
-
top: var(--y);
-
width: var(--size);
-
height: var(--size);
-
background: radial-gradient(circle closest-side, pink, transparent);
-
transform: translate(-50%, -50%);
-
transition: width 0.2s ease, height 0.2s ease;
-
}
-
.mouse-cursor-gradient-tracking:hover::before {
-
--size: 200px;
-
}
溢出滚动渐变
向溢出元素添加渐变以更好地指示有更多内容需要滚动。
使用一个相对定位的伪元素,背景色渐变,透明度.可以达到以下效果
此种效果使用重复的背景图片,相对定位到底部,即可实现
创建一个三角形可以使用
设置三条边
使一个dome全屏显示 document.getElementById('element').requestFullscreen()
使用:fullscreen来控制全屏状态下的样式
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/100137057
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）