CSS3制作蘋果手機的Message圖標，超強大！

2024-09-05 12:17:19

字體：大中小

來源：轉載

供稿：網友

采用CSS3技術實現的仿iPhone蘋果手機的Message圖標，暴牛超酷！不得不佩服作者很牛比的水平！期待大家借鑒。這也讓我覺得CSS3真是一個好東西。請點擊制作說明到官方網站查看教程。

<!DOCTYPE HTML><html lang=zh-cn><head><meta charset=utf-8><title>iphone的message圖標</title><style>*{margin:0px;padding:0px;}body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}.icon {width: 56px;height: 56px;z-index: 10;position: absolute;left: 50%;top: 50%;margin-left: -28px;margin-top: -28px;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;    -webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;	-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;	box-shadow: rgba(0,0,0,0.5) 0 1px 2px;   }.icon span {    display: block;text-align: center;font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #fff;position: absolute;top: 58px;left: -10px;width: 76px;    text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;    text-transform: capitalize;}.i_message {	width: 100%;height: 100%;    -webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;    position: relative;    overflow: hidden;    cursor: pointer;    background: -webkit-linear-gradient(top, #015801, #06f700);    background: -moz-linear-gradient(top, #015801, #06f700);    background: -ms-linear-gradient(top, #015801, #06f700);    background: -o-linear-gradient(top, #015801, #06f700);    background: linear-gradient(top, #015801, #06f700);    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);    overflow: hidden;}.i_message .bg_angled {    -webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;    width: 125%;     height: 125%;    position: absolute;    left: -7px;    top: -7px;    -webkit-background-size: 4px 4px;	-moz-background-size: 4px 4px;	-ms-background-size: 4px 4px;	-o-background-size: 4px 4px;	background-size: 4px 4px;    background-color: none;    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);    background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%,  transparent 100%);    -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	transform: rotate(-45deg);}.i_message:after{    content: '';    -webkit-box-shadow: inset #06f700 0 0 2px;	-moz-box-shadow: inset #06f700 0 0 2px;	box-shadow: inset #06f700 0 0 2px;    width: 100%;    height: 100%;    position: absolute;    display: block;    -webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;    z-index: 2;}.i_message:before{    content: '';    width: 100%;    height: 50%;    position: absolute;    display: block;    -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;	-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;	border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;    background: rgba(255,255,255,0.5);    z-index: 5;    -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;	-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;	box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;}.i_message .bulb {    position: absolute;    width: 39px;    height: 32px;    top: 47%;    left: 50%;    margin-left: -19.5px;    margin-top: -16px;    -webkit-border-radius: 50%/50%;	-moz-border-radius: 50%/50%;	border-radius: 50%/50%;    background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%);    background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%);    background: -ms-linear-gradient(bottom, #fff, #cbdae9 50%);    background: -o-linear-gradient(bottom, #fff, #cbdae9 50%);    background: linear-gradient(bottom, #fff, #cbdae9 50%);    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0);	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0);    -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;	-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;	box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;    z-index: 2;}.i_message .tail {    position: absolute;    background: #fff;    width: 11px;    height: 7px;    left: 11px;    bottom: 12px;    -webkit-border-radius: 0 0 100% 0/ 0 0 100% 0;	-moz-border-radius: 0 0 100% 0/ 0 0 100% 0;	border-radius: 0 0 100% 0/ 0 0 100% 0;    z-index: 1;    -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;	-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;	box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;}.i_message .tail:after {    content: '';    position: absolute;    width: 10px;    height: 10px;    -webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;    left: -6px;    top: -3px;    background:-webkit-linear-gradient(bottom, #05d400, #04ba00);    background:-moz-linear-gradient(bottom, #05d400, #04ba00);    background:-ms-linear-gradient(bottom, #05d400, #04ba00);    background:-o-linear-gradient(bottom, #05d400, #04ba00);    background:linear-gradient(bottom, #05d400, #04ba00);    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0);	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0);}.i_message .tail:before {    content: '';    position: absolute;    width: 10px;    height: 10px;    -webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;    left: -6px;    top: -3px;    -webkit-background-size: 4px 4px;	-moz-background-size: 4px 4px;	-ms-background-size: 4px 4px;	-o-background-size: 4px 4px;	background-size: 4px 4px;    background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);    background-image:-ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);    background-image:-o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);    background-image:linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);    -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	transform: rotate(-45deg);    z-index: 10;}.i_message .hack {    background:-webkit-linear-gradient(top, #ebf1f7, #fff);    background:-moz-linear-gradient(top, #ebf1f7, #fff);    background:-ms-linear-gradient(top, #ebf1f7, #fff);    background:-o-linear-gradient(top, #ebf1f7, #fff);    background:linear-gradient(top, #ebf1f7, #fff);    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0);	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0);    width: 5px;    height: 5px;    left: 15px;    top: 36px;    position: absolute;    z-index: 10;    -webkit-border-radius:0 0 3px 0;	-moz-border-radius:0 0 3px 0;	border-radius:0 0 3px 0;}</style></head><body><div   id="iwvjtn8m0"   class="icon">	<div   id="iwvjtn8m0"   class="i_message">		<div   id="iwvjtn8m0"   class="bg_angled"></div>		<div   id="iwvjtn8m0"   class="bulb"></div>		<div   id="iwvjtn8m0"   class="tail"></div>		<div   id="iwvjtn8m0"   class="hack"></div>	</div>	<span>Message</SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556559.html'>CSS3制作精美的iphone電話圖標，不使用圖片</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556561.html'>CSS3.0實例教程:使用transition制作動感十足的圖文切換</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流