Css3放大+打字机

曾经终败给现在 2022-03-09 11:36 319阅读 0赞

开发工具与关键技术：DW  
作者：不孝子  
撰写时间：2019年3月12日

技术有限，作业没完成，只能重发了，方法没没变只是样式上改了一下，不妨来看下，或许用的上，看一下代码吧：我在标签里引入了背景音乐；

###  ###

Css的样式主要是要选择到整个页面上的图片，给图片设置伪类，当鼠标移入某张图片时有放大效果，我还给设置了一个css的打字机，起到修饰页面，使页面不那么单调：

###  ###

*{
    	margin: 0 auto;
    	padding: 0;
    }
    .box{
    	width: 1080px;
    	height: 1440px;
    }
    .box img:hover{ /*选择到整个页面上的图片，给图片一个伪类，		当鼠标移到某张图片时有放大效果*/
    	transform: scale(3);/*放大3倍*/
    }
    img{
    	width: 110px;
    	height: 120px;
    }
    .one{
    	padding-top: 116px;
    	width: 566px;
    	height: 120px;
    }
    .tow{
    	width: 789px;
    	height: 120px;
    }
    .tow img:nth-of-type(1){/*类选择器*/
    	margin-right: 220px;
    }
    .tow img:nth-of-type(2){
    	margin-right: 220px;
    }
    	.three{
    	margin-top: 5px;
    	width: 1020px;
    	height: 385px;
    }
    .three img:nth-of-type(1){	
    	float: left;
    }
    .three img:nth-of-type(2){
    	width:262px;
    	height:385px;
    	margin-left: 272px;	
    }
    .three img:nth-of-type(3){
    	float: right;
    }
    .four{
    	width: 1020px;
    	height: 385px;
    	position: relative;
    	top: -260px;
    	left: 0px;
    }
    .four img:nth-of-type(1){	
    	float:left;
    }
    .four img:nth-of-type(2){
    	float: right;
    }
    .five{
    	width: 794px;
       height: 120px;
       position: relative;/*相对定位*/
       top: -533px;
      left: 0px;
    }
    .five img:nth-child(1){
    	float:left;
    }
    .five img:nth-of-type(2){
    	float: right;
    }
    .six{
    	width: 566px;
     	height: 120px;
     	position: relative;
    	 top: -560px;
    	 left: 0px;
    }
    .six img:nth-child(1){	
    	float:left;
    }
    .six img:nth-of-type(2){
    	float: right;
    }
    .seven{
    	width: 340px;
    	height: 120px;
        position: relative;
    	top: -605px;
    	left: 0px;
    }
    .seven img:nth-child(1){
    	float:left;
    }
    .seven img:nth-of-type(2){
    	float: right;
    }
    .eight{
    	width: 110px;
    	height: 120px;
     	position: relative;
     	top: -630px;
     	left: 0px;
    }
    .nine{
    	width: 460px;
    	height: 120px;
    	position: relative;
    	top: -630px;
    	left: 0px;
    	color: #fff;
    }
    @keyframes typing {
    	from { 
    		width: 0; 
    } 
    }
    @keyframes blink-caret {
    	50% { 
    		border-color: transparent; 
     } 
    }		
    h5{
    	transition-delay: 0.1s;
    	font: bold 200% Consolas, Monaco, monospace;/*字体粗体  	字体大小*/
    	border-right: .1em solid;
    	width: 13.8em; /* 打字机可视区域，可以在着调节可视区域的宽度 */
    	margin: 2em 1em;
    	white-space: nowrap;
    	overflow: hidden;
    	animation: typing 5s steps(36, end), /* # of steps = # of chars */
    				blink-caret .5s step-end infinite alternate;/*无限的*/

效果图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]: /images/20220309/1b69fc3453ac4c29b12eaeabb5158c4f.png