动态网页的建立

最新推荐文章于 2025-03-23 14:58:39 发布

WWWWWWWWolf

最新推荐文章于 2025-03-23 14:58:39 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/dongteng/blog/684457

本文介绍了一个使用CSS实现的动态网页效果案例。通过设置不同的:hover伪类选择器，实现了列表项的背景颜色变化、文字大小调整、图标尺寸改变及位置动画等效果。

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

2019独角兽企业重金招聘Python工程师标准>>>

使用css样式实现动态网页

html：

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title></title>
 4 
 5     <link href="css/domo.css" rel="stylesheet" />
 6 </head>
 7 
 8 <body >
 9     <ul class=" list" >
10         <li>
11             <div class=" border"></div>
12             <span class=" icon">☆</span>
13             <div class=" text">
14                 <h2><a href="#">首页</a></h2>
15                 <h3>home</h3>
16             </div>
17         </li>
18         <li>
19             <div class=" border"></div>
20             <span class=" icon">☆</span>
21             <div class=" text">
22                 <h2><a href="#">东腾科技</a></h2>
23                 <h3>欢迎你的加入</h3>
24             </div>
25         </li>
26         <li>
27             <div class=" border"></div>
28             <span class=" icon">☆</span>
29             <div class=" text">
30                 <h2><a href="#">现代化的创新</a></h2>
31                 <h3>引领全球时尚</h3>
32             </div>
33         </li>
34         <li>
35             <div class=" border"></div>
36             <span class=" icon">☆</span>
37             <div class=" text">
38                 <h2><a href="#">特殊的管理方案</a></h2>
39                 <h3>强大的团队合作</h3>
40             </div>
41         </li>
42     </ul>
43 </body>
44 </html>

css：

  1 body,ul,h2,h3 {
  2     margin:0px;
  3     padding:0px;
  4 }
  5 ul{
  6     list-style:none;
  7 }
  8 a{
  9     text-decoration:none;
 10 }
 11 body{
 12     background-image:url(http://localhost:2491/EX_Asp_Net/image/20.png) ;
 13 }
 14 .list{
 15     height:auto;
 16     width:100%;
 17     margin-top:50px;
 18 }
 19 .list li{
 20     height:100px;
 21     width:500px;
 22     margin-left:100px;
 23     
 24     background-color:#fff;
 25     margin-bottom:10px;
 26     box-shadow:0px 5px 5px #ddd;
 27     position:relative;
 28    -webkit-transition:all 0.5s ease;
 29 }
 30 .list .icon{
 31     display:block;
 32     width:90px;
 33     width:90px;
 34     font-size:45px;
 35     line-height:90px;
 36     text-align:center;
 37     float:left;
 38     margin-left:20px;
 39     text-shadow:0 0 5px red;
 40     -webkit-transition:all 0.5s ease;
 41 }
 42 .list .text{
 43     height:70px;
 44     width:300px;
 45     float:left;
 46     margin-top:25px;
 47     -webkit-animation:0.5s 0.2s ease;
 48 }
 49 .text h2, .text a{
 50     color:#333;
 51     font-size:30px;
 52     text-shadow:1px 2px 4px #999;
 53     -webkit-transition:all 0.5s ease;
 54 }
 55 .text h3{
 56     font-size:16px;
 57     color:#666;
 58     margin-top:5px;
 59     -webkit-transition:all 0.5s ease;
 60 }
 61 .list .border{
 62     height:100px;
 63     width:10px;
 64     background-color:#f90;
 65     position:absolute;
 66     left:0px;top:0px;
 67     visibility:hidden ;
 68     -webkit-transition:all 0.5s ease;
 69 }
 70 .list li:hover{
 71     background-color:#000;
 72 
 73 }
 74 .list li:hover h2, .list li:hover a{
 75     color:#fff;
 76     font-size:20px;
 77 }
 78 .list li:hover h3{
 79    font-size:29px;
 80    color:#f60;
 81 
 82 }
 83 .list li:hover .icon{
 84     color:#f90;
 85     font-size:70px;
 86 }
 87 .list li:hover .border{
 88     visibility:visible ;
 89     left:490px;
 90 }
 91 .list li:hover  .text{
 92     -webkit-animation-name:shake;
 93 }
 94 @-webkit-keyframes shake{/*创建动画*/
 95     0%,100%{
 96         -webkit-transform:translate(0) ;
 97     }
 98     20%,60%{
 99          -webkit-transform:translateX(-10px) ;
100     }
101     40%,80%{
102         -webkit-transform:translateX(10px) ;
103     }
104 }