CSS3仿LOGO图片阴影特效

2020-01-27 14:19:48

字体：大中小

来源：转载

供稿：网友

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动，阴影可以是无规则的，而且阴影的大小也是随时变化的，本例子就是用CSs3写成一个Logo，然后再加以阴影特效，重点不是展示阴影效果有多漂亮，而是如何去实现这种CSS3效果。
　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3带阴影的Logo效果</title><style>*{margin:0;padding:0;line-height:1.5;font-size:1px;}.wrap{ width: 240px; height: 240px;border-bottom-left-radius: 120px;border-bottom-right-radius: 120px;border-top-right-radius: 120px;background:#b1e4ff;border:2px solid #789cb6;box-shadow: 5px 5px 7px #999;-moz-border-bottom-left-radius: 120px;-moz-border-bottom-right-radius: 120px;-moz-border-top-right-radius: 120px;position:relative;margin:10px;}.font_e{font-size:300px;color:#fff; position:absolute;left:0;top:0;width: 240px; height: 240px;text-align:center;line-height:210px; font-family:"Arial", Gadget, sans-serif;}.tip{border-color:#fff transparent transparent transparent;border-style:solid;border-width:50px;font-size:0; position:absolute;top:-40px;left:-40px;	-webkit-transform: rotateZ(135deg);    -moz-transform: rotate(135deg);    transform: rotateZ(135deg);}.tip_2{width:50px;height:50px; background:#fff; position:absolute;top:25px; left:25px;-webkit-transform: rotateZ(135deg);-moz-transform: rotate(135deg);transform: rotateZ(135deg);}</style></head><body><div class="wrap"><div class="font_e">e</div>    <div class="tip"></div>    <div class="tip_2"></div></div></body></html>

上一篇：蓝色CSS分页样式-取自DedeCms

下一篇：CSS控制表格打印

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注