
利用CSS3的特性,简单实现一些文字效果
内阴影文字
.press { color: transparent; background-color: black; text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px; -webkit-background-clip: text; }
空心文字
.stroke { color: transparent; -webkit-text-stroke: 1px black; letter-spacing: 0.04em; }
3D效果文字
.threed { color: #fafafa; letter-spacing: 0; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; }
复古风格(效果以图片为准)
.vintage { background: #EEE url(https://ae01.alicdn.com/kf/U4a49483e25c3412d8a5423702df20ab3N.gif) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
添加好看的蒲公英
添加html代码
<div class="dandelion"> <span class="smalldan"></span> <span class="bigdan"></span> </div>
添加css代码
/* 在小屏幕自动隐藏 */ @media screen and (max-width:600px) { .dandelion { display: none !important; } } .dandelion span { /*display: block;*/ position: fixed; z-index: 9999999999; bottom: 0px; background-image: url(https://img02.sogoucdn.com/app/a/100520146/74ef2be737eb5d9808582fb5b9ddaee0); /* background-image: url(https://ae01.alicdn.com/kf/Ue5a6d5b7713c412aac661102e0f48dd4F.png); 备用地址*/ background-repeat: no-repeat; _background: none; /* 动画效果 */ -webkit-animation: ball-x 3s linear 2s infinite; -moz-animation: ball-x 3s linear 2s infinite; animation: ball-x 3s linear 2s infinite; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; transform-origin: bottom center; } /* 大的蒲公英样式 */ .dandelion .bigdan { width: 64px; height: 115px; left: 41px; background-position: -86px -36px; border: 0px solid #fff; } /* 小的蒲公英样式 */ .dandelion .smalldan { width: 36px; height: 60px; left: 88px; background-position: 0 -90px; border: 0px solid #fff; } /* 以下是动画效果 */ @keyframes ball-x { 0% {transform: rotate(0deg);} 25% {transform: rotate(5deg);} 50% {transform: rotate(0deg);} 75% {transform: rotate(-5deg);} 100% {transform: rotate(0deg);} } @-webkit-keyframes ball-x { 0% {-webkit-transform: rotate(0deg);} 25% {-webkit-transform: rotate(5deg);} 50% {-webkit-transform: rotate(0deg);} 75% {-webkit-transform: rotate(-5deg);} 100% {-webkit-transform: rotate(0deg);} } @-moz-keyframes ball-x { 0% { -moz-transform: rotate(0deg); } 25% { -moz-transform: rotate(5deg); } 50% { -moz-transform: rotate(0deg); } 75% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } }
今天又水了一篇
未经允许不得转载:作者:锅巴网络,
转载或复制请以 超链接形式 并注明出处 锅巴资源。
原文地址:《HTML纯CSS实现3D文字效果 以及好看的蒲公英》 发布于2019-12-30
评论 抢沙发