中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用css3怎么實現一個文本懸停改變效果

發布時間:2021-04-14 18:03:21 來源:億速云 閱讀:135 作者:Leah 欄目:web開發

使用css3怎么實現一個文本懸停改變效果?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

html

<h2 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h2>

css

.hover-text-3d {
    font-size: 7em;
}
.hover-text-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-text-fill-color: #fff;
    text-fill-color: #fff;
}
.hover-text-3d:before {
    position: absolute;
    overflow: hidden;
    width: 0;
    content: attr(data-text);
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    -webkit-text-fill-color: #aaf0d1;
    text-fill-color: #aaf0d1;
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
    -webkit-text-stroke-color: #aaf0d1;
    text-stroke-color: #aaf0d1;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));
    -o-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));
}
.hover-text-3d:hover:before {
    width: 100%;
}

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

尼玛县| 公主岭市| 肇源县| 凤翔县| 自贡市| 龙州县| 桃江县| 五台县| 昭觉县| 建湖县| 习水县| 密山市| 宁明县| 甘泉县| 公安县| 津南区| 北安市| 昌都县| 鄂托克旗| 沅江市| 广水市| 曲麻莱县| 富平县| 册亨县| 冕宁县| 崇仁县| 汉源县| 绥棱县| 托克逊县| 体育| 嵊州市| 金昌市| 台中市| 安阳县| 卓尼县| 永康市| 宣汉县| 邯郸县| 海阳市| 思茅市| 黔西县|