白色边框透明加动画

￡神魔★判官ぃ 2022-07-12 06:21 196阅读 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 条评论，196人围观）

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

相关阅读

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

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

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

相关 css半透明边框

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

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

相关白色边框透明加动画

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

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

相关给UITextView加边框

\_answerTextView = \[\[UITextViewalloc\] initWithFrame:CGRectMake(10.0, 10.0, 300.0, 39

拼搏现实的明天。/ 2022年06月12日 08:57/ 0 赞/ 187 阅读

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

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

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

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

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

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

相关 Android 安卓动画补间动画 - 透明/渐变动画

补间动画之透明/渐变动画实现效果:点击按钮后按钮从完全透明到不透明补间动画概念:就是从一个画面过渡到另一个画面时让人看到中间动画效果！ -----------

逃离我推掉我的手/ 2022年05月14日 02:36/ 0 赞/ 295 阅读

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

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

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

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

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

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

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

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

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