随着时间的推移，CSS规范变得越来越强大，允许Web设计人员和开发人员创建更漂亮，更用户友好的网站。在本文中，我将向您展示纯CSS中一些真正令人惊讶的现代技术。
如果您正在寻找代理机构来创建一个视觉上吸引人的现代网站，请访问https://ynd.co/。
自定义变量
创建网站时，CSS变量是一个真正的节省时间。只需定义变量并在样式表中尽可能多地使用它们。对于大多数人来说，下面的代码应该是不言自明的，但如果您需要更多信息，请随时查看此快速指南。
<p class="custom-variables">CSS is awesome!</p>
:root {
/* Place variables within here to use the variables globally. */
}
.custom-variables {
–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;
color: var(–some-color);
font-size: var(–some-size);
font-style: var(–some-keyword);
text-shadow: var(–some-complex-value);
}
资料来源：Codepen
悬停时颜色褪色
一种让链接（或任何其他元素）看起来更好的简单方法。
a {
color: #000;
-webkit-transition: color 1s ease-in; /*safari and chrome */
-moz-transition: color 1s ease-in; /* firefox */
-o-transition: color 1s ease-in; /* opera */
}
a:hover {
color: #c00;
}
资料来源：Matt Lambert
纯CSS甜甜圈微调器
当让访问者知道内容正在加载时，这些微调器非常受欢迎。您可能想要使用图像，但就网站速度而言，使用CSS更好。这里没什么复杂的，只需先看看我们的HTML：
……和相应的CSS。需要更多关于CSS关键帧的信息？你去吧！
@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;
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261559.html