CSS3过度鼠标经过实现炫酷图片效果

编程入门行业动态更新时间:2024-10-23 11:24:10

CSS3过度<a href=https://www.elefans.com/category/jswz/34/1769042.html style= 鼠标经过实现炫酷图片效果"/>

CSS3过度鼠标经过实现炫酷图片效果

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body {
background: #000;}.box {overflow: hidden;position: relative;width:450px;height:320px;border:1px solid #000;margin:100px auto;box-shadow:-1px 0px 45px 1px #fff;}.box:hover img {transform: scale(1.1);}.box img {transition: all .5s;width: 100%;height:100%;}.box span {transition:all .5s;position: absolute;top: 40px;left:-200px;color: #fff;font-size: 24px;font-weight: 700;}.box:hover span {left:45px;}.cover1 {transition:all .5s;z-index: 1;position: absolute;width: 100%;height: 100%;top: 0;left:0;background:rgba(0, 0, 255,0);

更多推荐

CSS3过度鼠标经过实现炫酷图片效果

本文发布于:2024-02-11 20:15:52，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1683204.html