图片
关注
分享
扫一扫
文章平均质量分 63
erdouzhang
这个作者很懒，什么都没留下…
展开
-
图片底部遮罩效果
background-color: rgba(0, 0, 0, .5);中的0.5表示这个矩形遮罩的透明度。<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>HTML+CSS实现图片下半部分遮罩文字效果</title> <style> .class_outer { dis原创 2017-03-09 20:09:11 · 1091 阅读 · 0 评论 -
CSS3实现头像旋转
在线展示：鼠标放上头像旋转 鼠标未放上效果： 鼠标放上之后旋转效果：transition: all 2.0s;表示所有的属性变换在2秒内完成；transform: rotate(360deg);表示图片旋转360度。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>原创 2017-03-09 20:18:13 · 765 阅读 · 0 评论 -
仿淘宝— 商品图片切换
在线展示 html:<div id="box"> <ul> <li id="li01"><img src="./images/01.jpg" alt=""></li> <li id="li02"><img src="./images/02.jpg" alt=""></li> <li id="li03"><img src="./images/0原创 2017-04-24 10:59:03 · 2305 阅读 · 0 评论 -
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
在线演示鼠标经过或悬停时，图片会缓慢放大；鼠标离开，图片缓慢还原。 下图分别为：原图、鼠标经过代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{原创 2017-03-09 19:56:38 · 10871 阅读 · 0 评论 -
CSS3-鼠标经过图片旋转、缩放、还原
在线演示 html:<body> <div class="box"> <a href="#"><img src="img/02.jpg" alt=""></a> </div> </body>css：<style> .box img{ width: 250px; height: 450px; } @-webkit-keyframes p原创 2017-03-13 16:35:53 · 9216 阅读 · 0 评论