白色边框透明加动画

￡神魔★判官ぃ 2022-07-12 06:21 228阅读 0赞

效果图：

![Center][]

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> .imgdiv{ position: relative; width: 280px; height: 279px; overflow: hidden; box-shadow: 5px 5px 10px #434343; /* transform: rotate(5deg); */ } img:hover{ border:none; transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transition: all linear .5s; -moz-transition: all linear .5s; /* Firefox 4 */ -webkit-transition: all linear .5s; /* Safari 和 Chrome */ -o-transition:all linear .5s; } .layer{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; width: 200px; height: 200px; background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); } .box{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; width: 180px; height: 180px; background-color: #fff; background-clip: padding-box; } .top{ width: 150px; height: 70px; border-bottom: 3px solid #BEA971; margin-left: 10px; margin-top: 10px; text-align: center; } .bottom{ width: 150px; height: 70px; margin-left: 10px; margin-top: 10px; text-align: center; } </style> <link rel="stylesheet" href=""> </head> <body> <div class="imgdiv"> <img src="1.jpg" alt=""> <div class="layer"> <div class="box"> <div class="top"> <b>bold</b> <p>this is a pictrue</p> </div> <div class="bottom"> <b>bold</b> <p>this is a pictrue</p> </div> </div> </div> </div> </body> </html>

[Center]: /images/20220711/d7ec5114e2ac4643aa622a04515692a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt 将图片白色背景转换为透明背景

QImage convertImageWhiteColorAlpha(QImage val) { QImage imageAlpha = val

心已赠人/ 2023年07月13日 10:41/ 0 赞/ 34 阅读

相关 Qt透明无边框窗口

> 文章介绍如何设置窗口透明，无边框和拖动。 ![demo][] 0x00 如何透明窗口？第一步：开启窗口的透明层。 setWindowFlags(Q

雨点打透心脏的1/2处/ 2023年06月17日 06:56/ 0 赞/ 35 阅读

相关 Android 加载动画逐帧动画透明弹窗

1. 效果截图 ![在这里插入图片描述][20210516144936531.gif] 2. LoadingDialog代码 public class L

阳光穿透心脏的1/2处/ 2023年01月21日 13:22/ 0 赞/ 238 阅读

相关 css半透明边框

核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding

傷城~/ 2022年10月01日 10:50/ 0 赞/ 243 阅读

相关白色边框透明加动画

效果图： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8

￡神魔★判官ぃ/ 2022年07月12日 06:21/ 0 赞/ 229 阅读

相关【CSS揭秘】案例1、半透明边框

先附上代码： HTML代码： <!doctype html> <html lang="en"> <head> <meta char

港控/mmm°/ 2022年06月08日 07:47/ 0 赞/ 360 阅读

相关 qt-----去除边框和设置透明+移动

QT程序去掉标题栏边框：在构造函数里面添加 setWindowFlags(Qt::FramelessWindowHint); //去除边框 this->setAt

迈不过友情╰/ 2022年05月18日 10:55/ 0 赞/ 738 阅读

相关 python3改图片白色该为透明

pip install Pillow import PIL.Image as Image 以第一个像素为准，相同色改为透明 def tran

迈不过友情╰/ 2022年04月10日 08:06/ 0 赞/ 210 阅读

相关 idea 2019.2 版本更新（最顶部从白色边框变为黑色边框)

我觉得最实用的改变（最顶部从白色边框变为黑色边框) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

﹏ヽ暗。殇╰゛Y/ 2021年11月17日 20:40/ 0 赞/ 537 阅读

相关 Android webview设置背景透明，去掉白色

> 在完全去掉其他控件的颜色基础上，显示的webview依旧还是显示为白色的底，但是在控件上面并没有设置颜色，如下： <WebView android:id="@+i

末蓝、/ 2021年06月24日 16:10/ 0 赞/ 1304 阅读