html如何将页面旋转90度,HTML5 90度旋转倾斜卡片队列页面布局

这篇博客展示了如何使用CSS进行网页设计,包括@import导入字体、线性渐变背景、旋转和过渡效果。创建了一个带有45度角旋转、悬停缩放效果的方块布局,并应用了自定义滚动条样式。通过调整元素的样式,实现了视觉吸引力强且动态的网页效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS

语言:

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Lateef|Mirza|Rakkas|Lato|Source+Sans+Pro|Ubuntu');

/* *{transition: 0.3s linear; padding:0;margin:0;} */

body {

background-image: linear-gradient(-225deg, rgba(44, 216, 213, 0.45) 0%, #C5C1FF 56%, rgba(255, 186, 195, 0.71) 100%);

background-repeat: no-repeat;

background-attachment: fixed;

}

h2 {

margin: 2em;

letter-spacing: 0.2em;

color: #EEE

}

.container {

margin: 3em auto;

width: 90%;

text-align: center;

/* font-family: 'Aref Ruqaa', serif; */

font-family: 'Ubuntu', sans-serif;

/* font-family: 'Lato', sans-serif; */

font-family: 'Source Sans Pro', sans-serif;

}

.item {

/* background: #FFF; */

margin: 2em;

display: inline-block;

width: 200px;

height: 200px;

border-radius: 20px;

transform: rotate(45deg);

position: relative;

overflow: hidden;

transition: all 0.3s ease-in-out;

padding: 0;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

margin: 0 auto;

}

.item p {

position: absolute;

transform: rotate(-45deg);

top: 30%;

left: -20%;

background: rgba(0, 0, 0, 0.7);

padding: 10px 20px;

width: 130%;

text-align: center;

color: #fff;

transition: all 0.3s ease-in-out;

}

.item:hover {

transform: none;

transform: scale(1.5);

z-index: 2;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

.item:hover > p {

transform: none;

top: 0;

}

img {

width: 100%;

height: 100%;

transition: 0.3s linear;

transform: rotate(-45deg) scale(1.4)

}

.item:hover > img {

transform: none;

}

p.ar {

font-family: 'Rakkas', cursive;

font-size: 1.1em;

}

body::-webkit-scrollbar {

width: 0.7em;

background-color: #EEE;

}

body::-webkit-scrollbar-thumb {

/* background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */

background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);

/* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */

/* background: linear-gradient(to top, #2193b0, #6dd5ed); */

border-radius: 1em;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值