css 实现GTA5 封面

最新推荐文章于 2024-08-27 19:08:49 发布

layman0528

最新推荐文章于 2024-08-27 19:08:49 发布

阅读量661

点赞数 13

分类专栏： # css 样式文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46282323/article/details/134980601

版权

css 样式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
上面的图片如何通过css 完成呢。废话不说，直接上代码

<template>
	<view class="movie_report">
		<view class="movie_img" v-for="item in 9" :key="item">
			<image :src="'../../static/'+item+'.png'" ></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	
	*{
	  box-sizing: border-box;  
	}
	body{
	  padding:0; 
	  margin: 0;
	  background: #23232a;
	}

	image {
	  width:100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: 40% 0;
	}
	
	
	.movie_report{
		  padding: .8rem;
		  background: black;
		  height: 95vh;
		  min-height: 500px;
		  width: 100%;
		  max-width: 600px;
		  margin: auto;
		  margin-top: 2.5vh;
		  border: 1px solid #c9b473;
		  overflow: hidden;
		  display: grid;
		
		  grid-template-columns: 1fr .7fr .3fr 1fr;
		  grid-template-rows: 20% 40% 20% 20%;
		  grid-template-areas: 'one two two three'
		    'four five five five'
		    'six five five five'
		    'six seven eight eight';
	}
	
	.movie_img{
		&:nth-child(1),
		  &:nth-child(2),
		  &:nth-child(3){
		    image{
		      width:120%;
		      height: 120%;
		    }
		  }
		  &:first-child{
		    grid-area: one;
		    clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%);
		  }
		  &:nth-child(2){
		    grid-area: two;
		    clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%);
		  }
		  &:nth-child(3){
		    grid-area: three;
		    clip-path:polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%);
		  }
		  &:nth-child(4){
		    grid-area: four;
		    clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%);
		
		    image {
		      width: 135%;
		      height: 135%;
		    }
		  }
		  &:nth-child(5){
		    grid-area: five;
		    clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 100%, 53% 63.21%, 3.23% 73.02%, 14.30% 44.04%);
		  }
		  &:nth-child(6){
		    grid-area: six;
		    clip-path:  polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%);
		  }
		  &:nth-child(7){
		    grid-area: seven;
		    clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.30% 100.85%);
		  }
		  &:nth-child(8){
		    grid-area: eight;
		    clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%);
		  }
		  &:nth-child(9){
		    grid-row-start: 3;
		    grid-row-end: 4;
		    grid-column-start: 2;
		    grid-column-end: 4; 
		
		    clip-path:polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%);
		
		    image{
		      object-position: 30% 50%;
		      height: 135%;
		    }
		  }
	}
</style>

css 属性介绍

上面使用的是scss ，那么里面除了经常使用的属性，还用那些属性。

通配符选择器（*）

*代表通配符选择器。它选择了所有元素，无论是什么类型的元素，都会匹配到。使用通配符选择器可能会影响性能

box-sizing

用于控制元素的盒模型如何计算尺寸

值	说明
content-box	此值使得元素的宽度和高度仅包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）
border-box	使得元素的宽度和高度包括内容的宽度、内边距和边框的宽度，而不会受到这些值的影响。换句话说，它让你能够更方便地设置元素的尺寸，因为你设置的尺寸会包含边框和内边距，而不会另外计算）

object-fit

通常用于 <img> 和 <video> 这样的可替换元素，控制其在其容器中的尺寸调整和裁剪

值	说明
fill	默认值。对象会完全填充其容器，可能会改变其宽高比例，导致拉伸或压缩
contain	保持对象的宽高比例，尽可能填充容器，但同时确保对象完全可见
cover	保持对象的宽高比例，填充容器并且对象的整个内容都可见。可能会裁剪对象
none	对象将保持原始尺寸，忽略容器的尺寸，可能会溢出容器
scale-down	对象的尺寸会被缩放到与 `none` 和 `contain` 中较小的尺寸相匹配