首页 > 作文

通过鼠标使图片交替显示

更新时间:2023-04-03 19:01:21 阅读: 评论:0

伪类 after、before、hover

css代码使用的是预编译less,
简单分析:就是固定框200*200,设定超出不显示,在div同时放入两张图片,通过margin的方式进行切换,效果由transition属性,显得较为平滑

.all_size(@width:200px,@height:200px) {  width: @width;  he陈羽凡个人资料ight: @height;}.img_style(@url) {  .all_size();  content: "";  display: inline-block;  background-size: contain;  background: url(@url) no-repeat center;}.img {  .all_size();  dis背诵play: inline-block;  overflow: hidden; .img_list {    .all亚马逊海淘攻略_size(400px,200px);    display: inline-block; &::before {      .img_style("../asts/imgaes/1.jpg");      transition: margin 0.2s;    }    &::after {      .img_style("../asts/imgaes/2.jpg");    }    &:hover::before {      margin-left: -400px;      transition: margin 0.2s;    }  }}
<div class="img">   <div class="img_list"></div></div>

如果看不懂less,就。。。

.img {  display: inline-block;  width: 200px;  height: 200px;  overflow: hidden;}.img梅汝璈_list {  display: inline-block;  width: 400px;  height: 200px;}.img_list::before {  content: "";  display: inline-block;  width: 200px;  height: 200px;  background: url("../asts/imgaes/1.jpg") no-repeat center;  background-size: contain;  transition: margin 0.2s;}.img_list::after {  content: "";  display: inl表白女生ine-block;  width: 200px;  height: 200px;  background: url("../asts/imgaes/2.jpg") no-repeat center;  background-size: contain;}.img_list:hover::before {  margin-left: -400px;  transition: margin 0.2s;}

本文地址:https://blog.csdn.net/weixin_45019566/article/details/107545589

本文发布于:2023-04-03 19:01:19,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/c335ec4772a9be9ab7d9aab31e796944.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:通过鼠标使图片交替显示.doc

本文 PDF 下载地址:通过鼠标使图片交替显示.pdf

标签:的是   亚马逊   平滑   两张
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图