2024-01-28 分類: 網站建設
單個字符p>
風span>
流span>
倜span>
儻span>
用腳本自動美化:p>
戀愛容易婚姻不易,且行且珍惜。span>
需要做的就是將.halfStyleCSS類應用到每個需要半邊美化的字符上。在上面的代碼示例中,每個span里都包含了一個字符,我們在上面放置了data-屬性,例如data-content="風",之后在偽元素里我們使用了attr(data-content)方法,這樣.halfStyle:before就會變得動態,不需要你手工的硬編碼它們的內容。
對于多個字符需要美化的情況,我們可以創建一段jQuery代碼自動將所有有.textToHalfStyleCSS類字符添加這種效果:
jQuery(function($) {
var text, chars, $el, i, output;
// 遍歷所有字符
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// Set the screen-reader text
$el.html('' + text + '');
// Reset output for appending
output = '';
// Iterate over all chars in the text
for (i = 0; i < chars.length; i++) {
// Create a styled element for each character and append to container
output += '+ chars[i] + '">' + chars[i] + '';
}
// Write to DOM only once
$el.append(output);
});
});
這樣,不論是一段文字還是整篇文字,我們都能一次搞定,不必手工一個一個的設置,也不必一個一個的做圖!
高級做法:左右半個字符都用偽元素生成
上面我們的做法中,文字的左半邊是用:before偽元素生成的,而右半邊使用的是原文字。但實際上我們可以將左右兩邊都用偽元素生成——右半邊用:after實現。
CSS代碼
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
display:block;
direction: rtl; /* very important, will make the width to start from right */
position:absolute;
z-index:2;
top:0;
left:50%;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!
網頁題目:巧妙的運用CSS3美化半個字符的方法
文章網址:http://m.newbst.com/news30/315930.html
成都網站建設公司_創新互聯,為您提供外貿建站、微信公眾號、建站公司、網站收錄、企業網站制作、軟件開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容