HTML5动画和鼠标移动

最新推荐文章于 2024-02-15 09:15:57 发布

眼角带笑_fxs

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/fxs_321/article/details/78451097

版权

鼠标移动上去字体变色中间有图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .clear:after{/*在每个.class之后插入新内容*/
            content: "\200B";
            display: block;/*使段落生成行内框，每个框是一个块级元素*/
            height: 0;
            clear: both;/*是图像的左侧和右侧均不出现浮动*/
        }
  /*定义最外层盒子*/
        .box{
            padding: 10px;
            border: 1px solid #000;
        }
  /*定义左侧大图片的样式*/
        .big_pic{
            width: 400px;
            height: 400px;
            background: #999;
            float: left;
            margin: 5px 0;
        }
  /*定义小图片集合样式*/
        .list{
            float: left;
            width: 700px;
        }
  /*定义每一个小图片集合样式*/
        .list li{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            margin:5px 5px 0;
            text-align: center;
        }
  /*定义小图片下方文字样式*/
        p{
            color: #fff;
            text-align: center;
            margin-top: 30px;
        }
  /*定义每一小个图片样式*/
        .btn{
            display: inline-block;/*定义行内块元素*/
            width: 70px;
            height: 70px;
            border-radius: 50%;/*向块级元素添加圆角边框*/
            background: rgba(0,0,0,.5);/*rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低*/
            margin-top: 50px;
            opacity: 0;/*透明度*/
            transition: all 1s ease;/*变形(transform)、转换(transition)和动画(animation)*/
        }
        li:hover .btn{
            opacity: 1;
        }
        li:hover p{
            color: blue;
        }
    </style>
</head>
<body>
<div class="box clear">
    <div class="big_pic"></div>
    <ul class="list clear">
        <li><span class="btn"></span><p>大国外交</p></li>
        <li><span class="btn"></span><p>大国外交</p></li>
        <li><span class="btn"></span><p>大国外交</p></li>
        <li><span class="btn"></span><p>大国外交</p></li>
        <li><span class="btn"></span><p>大国外交</p></li>
        <li><span class="btn"></span><p>大国外交</p></li>
    </ul>
</div>
</body>
</html>

动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#qw{
width:400px; height:300px;}
.div1{
  width:200px; height:100px;
  transform:translate(100px,20px);
  background-color:#E90C10;}
.mydiv{
  width:200px; height:100px;
  background-color:#E90C10;
  transform:rotate(-20deg);
  }
.mydiv2{
  width:200px; height:100px;
  background-color:#E90C10;
  transform:skew(20deg,15deg);
  }

.mydiv3{
  width:200px; height:100px;
  background-color:#E90C10;
  transform:scale(2,0.5);
  }
  #id{
   text-align:center;
   line-height:200px;
   width:200px; height:200px;
   border:1px solid #999;
   padding:0 20px;
   border-radius:100%;
   box-shadow:3px 3px 4px 5px #18A15F;
   text-shadow:7px 7px 5px #EF2A05;
   font-size:28px;
   background-color:#49ADD6;
   }

</style>
</head>