整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)
html
正在加載中<dot>...</dot>
css
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\\A..\\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
如果你看上圖代碼沒(méi)有看懂，請(qǐng)看下圖，我注釋掉一行代碼，你就明白了。原來(lái)是dot元素，沿著Y軸在循環(huán)位移，隱藏掉就讓你看到了加載的動(dòng)畫(huà)效果。
當(dāng)你需要這樣一個(gè)上傳文件，按鈕時(shí)，你考慮的是找設(shè)計(jì)弄個(gè)圖片，還是自己寫一個(gè)？？？
其實(shí)CSS寫，也很簡(jiǎn)單的。
<a href="javascript：;" class="upload" title="繼續(xù)上傳">添加圖片</a>
.upload{
position: relative;
display: inline-block;
width: 76px;
height: 76px;
color: #ccc;
border: 2px dashed; /*邊框虛線*/
text-indent: -12em; /*使其文字看不到*/
transition: color .25s; /*hover事件：顏色漸變動(dòng)畫(huà)*/
overflow: hidden;
margin: 50px 100px;
}
/*用before/after偽類做 + 號(hào)樣式*/
.upload:before, .upload:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.upload:hover{
color: #34538b;
}
.upload::before{
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.upload::after{
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
當(dāng)我們想給一個(gè)矩形或其他能用 border-radius 生成的形狀加投影時(shí)，用 box-shadow 都可以解決，如下圖：
但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因?yàn)?border-radius 會(huì)無(wú)恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);
2、元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框，但沒(méi)有背景(或者當(dāng) background-clip 不是 border-box 時(shí));
3、對(duì)話氣泡，它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過(guò) clip-path 生成的形狀。
下面來(lái)看看這個(gè)示例： html代碼
<div class="speech">不規(guī)則的投影</div>
css樣式
div {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 8em;
padding: .5em;
height: 5em;
margin: .6em;
background: #0cc071;
color: #fff;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時(shí)是偽類是沒(méi)有陰影的*/
-webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
}
.speech {
border-radius: .3em;
}
.speech::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #0cc071;
border-right-width: 0;
}
從上圖可以看出box-shadow搞不定的，drop-shadow給搞定了。這是為什么了？
可以很明顯的看出區(qū)別，為什么會(huì)這樣呢？在這里我用的是div標(biāo)簽，大家都知道，div標(biāo)簽是個(gè)塊標(biāo)簽，說(shuō)白了是個(gè)盒模型，指的是一塊區(qū)域，box-shadow的屬性只能添加到盒模型外面，因此內(nèi)部的東西是不會(huì)添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區(qū)域都做了陰影效果，就相當(dāng)于一種真正的投影。
經(jīng)常在網(wǎng)頁(yè)中看到一些Dialog，例如有些網(wǎng)頁(yè)點(diǎn)擊登錄注冊(cè)時(shí)就會(huì)跳出一個(gè)彈框來(lái)顯示登錄注冊(cè)頁(yè)面，下面就使用 css 完成一個(gè)可以自適應(yīng)，無(wú)論窗口的大小，始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內(nèi)容 </div> </div> </div>
css樣式
.c-pupup{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.c-pupup:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}
這些CSS都是非常實(shí)用的，有興趣的可以收藏起來(lái)，沒(méi)準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了，因?yàn)槲覀円呀?jīng)放棄它了。
喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！
SS的強(qiáng)大和精妙，只有在認(rèn)真研讀其代碼之后才會(huì)深刻明白。
今日繼續(xù)用純CSS畫(huà)圖，并給大家整理了本文中所有代碼，需要的小伙伴可以私信我哦。
首先，用CSS畫(huà)一個(gè)陰陽(yáng)圖，如下：
代碼也很簡(jiǎn)單：
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
當(dāng)然，顏色什么的，可以隨便改啦~
再畫(huà)一個(gè)可愛(ài)的雞蛋~~~像這樣：
代碼僅僅幾句話：
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
長(zhǎng)這樣：
代碼非常非常少：
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
是不是很神奇？不敢相信這幾句代碼居然有這樣的功力？
那就打開(kāi)電腦，按照我之前講的方法創(chuàng)建一個(gè)html試試吧~
不知道怎么創(chuàng)建的小伙伴看這里>>css3制作圖形大全：簡(jiǎn)單幾句代碼畫(huà)出漂亮的圖形，一起來(lái)看看吧~
avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過(guò) <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過(guò)<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁(yè)面中，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 內(nèi)聯(lián)形式：通過(guò) script 標(biāo)簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')
</script>
</body>
</html>2.外部形式
一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過(guò) <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：
// demo.js
document.write('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過(guò) script 的 src 屬性引入獨(dú)立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么 標(biāo)簽的代碼會(huì)被忽略！！！如下代碼所示：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
