HTML5+CSS3 使用变形特效-＞模仿课工场

痛定思痛。 2023-10-05 09:34 41阅读 0赞

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

页面

<body>
    
    		<div id="box">
    
    			
    			<div class="teach">
    				
    				<div class="pic">
    					<img src="image/r3_jxyf_03.jpg" />
    				</div>
    				
    				<div class="txt">
    					<dl>
    						<dt>总监级师资</dt>
    						<dd>打造复合型互联网高端技术人才</dd>
    					</dl>
    				</div>
    			</div>
    			
    			<div class="teach">
    				
    				<div class="pic">
    					<img src="image/r3_jxyf_05.jpg" />
    				</div>
    				
    				<div class="txt">
    					<dl>
    						<dt>大咖师资</dt>
                  			<dd>云集国内外-线互联网企业专家</dd>
    					</dl>
    				</div>
    			</div>
    			
    			
    			<div class="teach">
    				
    				<div class="pic">
    					<img src="image/r3_jxyf_07.jpg" />
    				</div>
    				
    				<div class="txt">
    					<dl>
    						<dt>课工场学习科学研究院</dt>
                  			<dd>助力课程研发，提升学员就业</dd>
    					</dl>
    				</div>
    			</div>
    			
    			
    			<div class="teach">
    				
    				<div class="pic">
    					<img src="image/r3_jxyf_09.jpg" />
    				</div>
    				
    				<div class="txt">
    					<dl>
    						<dt>智慧教材</dt>
                  			<dd>多所211高校授课教材首选</dd>
    					</dl>
    				</div>
    			</div>
    			
    		</div>
    	</body>

样式:

/*去掉边界,水平居中*/
    			*{
    				margin: 0px;
    				padding: 0px;
    				margin: 0px auto;
    			}
    		
    		   /*最大层*/
    			#box {
    				/*弹性布局*/
    				display: flex;
    				justify-content:center;
    				width: 10%;
    				/*父-相对定位*/
    				position: relative;
    			}
    			
    		   /*第二个层*/
    			.teach {
    				color: white;
    				width: 220px;
    				height: 315px;
    				/*父-相对定位*/
    				position: relative;
    				/*过渡效果*/
    				transition: all 1s linear;
    				margin-right: 35px;
    			}
    			/*图片放大是必须隐藏*/
    			.pic {
    				overflow: hidden;
    			}
    			
    			/*文本*/
    			.txt {
    				color: black;
    				/*透明度*/
    				opacity: 0.9; 
    				 /*大小*/
    				width: 220px;
    				height: 58px;
    				/*背景有点透明度*/
    				background: rgba(255, 255, 255, 0.8);
    				/*子-绝对定位：文字要在图片上*/
    				position: absolute;
    				bottom: 0px;
    			}
    			
    			.txt dl {
    				margin-top: 5px;
    				line-height: 22px;
    			}
    			
    			
    			.txt dt {
    				/*缩进*/
    				text-indent: .8em;
    				font-weight: bolder;
    				font-size: 16px;
    			}
    			
    			.txt dd {
    				text-indent: 1.2em;
    				font-size: 12px;
    			}
    			
    			/*整个层*/	
    			.teach:hover {
    				/*向上平移*/
    				transform: translateY(-15px);
    				/*阴影*/
    				box-shadow: 0px 0px 15px grey;
    			}
    			/*图片*/			
    			.teach:hover img {
    				z-index: 1;
    				/*过渡*/
    				transition: all 1s linear;
    				/*放大*/
    				transform: scale(1.2);
    			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200904165900879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70