外贸网站建设升上去,tk域名免费注册网站,免费的行情软件网站下载,数字营销软件效果展示 页面结构
从页面的结构上看#xff0c;在默认状态下毛玻璃卡片是有层次感的效果叠加在一起#xff0c;并且鼠标悬停在卡片区域后#xff0c;卡片整齐排列。
CSS3 知识点
transform 属性的 rotate 值运用content 属性的 attr 值运用
实现页面整体布局
div …效果展示 页面结构
从页面的结构上看在默认状态下毛玻璃卡片是有层次感的效果叠加在一起并且鼠标悬停在卡片区域后卡片整齐排列。
CSS3 知识点
transform 属性的 rotate 值运用content 属性的 attr 值运用
实现页面整体布局
div classcontainerdiv classglass style--i: -15 data-textDesigni classfa-solid fa-pen/i/divdiv classglass style--i: 5 data-textCodei classfa-solid fa-code/i/divdiv classglass style--i: 25 data-textLaunchi classfa-solid fa-rocket/i/divdiv classglass style--i: -15 data-textEarni classfa-solid fa-money-check-dollar/i/div
/div实现卡片的样式
.container .glass {position: relative;width: 200px;height: 240px;background: linear-gradient(#fff2, transparent);border: 1px solid rgba(0, 0, 0, 0.25);backdrop-filter: blur(10px);display: flex;justify-content: center;align-items: center;transition: 0.5s;border-radius: 10px;margin: 0 -45px;/* 获取HTML中的样式变量值 */transform: rotate(calc(var(--i) * 1deg));
}.container:hover .glass {transform: rotate(0deg);margin: 0 20px;
}实现卡片悬停样式
.container .glass::before {/* 获取HTML页面中的文字变量值 */content: attr(data-text);position: absolute;bottom: 0;width: 100%;height: 40px;background: rgba(255, 255, 255, 0.05);display: flex;justify-content: center;align-items: center;color: #fff;
}.container .glass i {font-size: 5em;color: #fff;
}完整代码下载
完整代码下载
