分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

CSS实现点击3D效果

发布时间:2023-09-06 01:43责任编辑:郭大石关键词:CSS

简单技巧,不废话看效果

贴代码

HTML

<div class="main01 main011"><a href="#"><img src="test.png"/></a></div>

 css

.main01{position: absolute;width: 260px;height: 160px;top: 50%;margin-top: -120px;border-radius:5px ;text-align: center;-webkit-transition: all .1s ease;-moz-transition: all .1s ease;transition: all .1s ease;outline: none;}.main01 img{border-radius: 5px;width: 100%;}.main01:hover img{transform: scale(1.05);-ms-transform: scale(1.05);overflow: hidden;}.main011{margin-left: 105px;background-color: #28B779;box-shadow: 0px 16px 0px rgba(31, 152, 98, 1), 0px 9px 25px rgba(0, 0, 0, .8);}.main011:hover{background-color: #4D4D4D\0/;margin-top: -110px;box-shadow: 0px 2px 0px rgba(31, 152, 98, 1), 0px 3px 6px rgba(0, 0, 0, 1);}

CSS实现点击3D效果

原文地址:https://www.cnblogs.com/huixin520/p/8466697.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved