admin 管理员组

文章数量: 887021

30秒CSS精华方法摘取分析,赏析,以及应用场景

    网上有个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;
}

 

本文标签： 30秒CSS精华方法摘取分析 赏析 以及应用场景

版权声明：本文标题：30秒CSS精华方法摘取分析,赏析,以及应用场景 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1730832952h1390971.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。