光标移动显示圆形图案+动画

最新推荐文章于 2022-10-24 15:20:02 发布

Stagefright

最新推荐文章于 2022-10-24 15:20:02 发布

阅读量565

点赞数

本文链接：https://blog.csdn.net/L59_1/article/details/78451459

版权

<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>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 250px;
background: orange;
}
60% {
margin-left: 350px;
background: blue;
}
100% {
margin-left: 1000px;
background: red;
}
}

.demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 3;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
</style>
</head>

<body>
<div class="demo1"></div>
</body>