网站建设出色的现代CSS技术

随着时间的推移,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; }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设出色的现代CSS技术
分享到:
赞(0)
广告位820*80