【知了堂学习笔记】CSS3令人眼前一亮的网页文字效果
2017-08-31 19:26
579 查看
今天,我给大家介绍一下利用text-shadow,css3动画实现的文字效果
首先,我们需要去了解一下text-shadow的相关属性
text-shadow:h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,可为负值;
v-shadow:垂直阴影的位置,可为负值;
blur:模糊的距离;
color:阴影的颜色.
其中blur以及color为可选参数,且text-shadow可以向文本添加一个或多个阴影,之间用逗号隔开。大家想要了解更多的信息可到w3school里面了解更多。
案例一
这里利用text-shadow,可以达到文字突出的效果
下面是CSS代码
静态的有了,那么下面我给大家介绍一下动态的效果。先看一下效果。
文字就像手机的呼吸灯一样,这里利用的css3的animation。下面,我给出关键的css代码:
这里运用了CSS3的动画效果animation和过渡transition,我这里简单的给大家说明一下
transition: all 0.5s; all是指过渡的属性,这里大家也可以设置成具体的属性;0.5是过渡时间
a
a631
nimation: animation1 1.5s ease-in-outinfinite alternate;
animation1是指,自己设置的animation名字,也就是动画执行的内容
@keyframes animation1{
from{ //属性开始的状态
}
to{ //属性结束的状态
}
}
1.5s:完成动画的时间为1.5s;
ease-in-out:元素从初始状态到终止状态,先加速再减速;
infinite:动画播放的次数,无限次;
alternate:动画播放方向,在正向播放后,也会反方向播放
知道原理后,大家可以大胆的常识,可能会看到你意想不到的效果。
有了好看的动画效果,那么配上好看的字体是不是很棒。下面,我再给大家介绍一下关于CSS中@font-face的运用。
@font-face{
font-family:'自定义字体的名称';
src:url('自定义字体的存放路径') format('自定义字体的格式');
font-weight:是否为粗体;
font-style:字体样式;
}
由于浏览器的不同,为了能够达到效果,我们还需要设置不同的字体格式
@font-face {
font-family: 'fontname';
src: url(' fontname.eot'); /* IE9 Compat Modes */
src: url(' fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/
url(' fontname.woff') format('woff'), /* 所有现代浏览器 */
url(' fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url(' fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
}
除了@font-face之外,我们还需要一样最重要的东西,就是特殊字体
获得特殊字体,我们需要到一些网站上去下载。博主使用的是Dafont.com,大家可以进入网站中选择自己喜欢的字体样式,然后下载。
下载解压后,打开文件
接下来,我们需要利用第三方软甲或者网站帮助我们去获得@font-face所需的字体格式
博主利用的是fontsquirrel,进入该网站后,我们会看到如下的界面
大家记住红色字体之前一定要打钩哦,然后点击右下角的下载
文件下载解压后,将文件中的.ttf,.otf,.woff,.eot,.svg(这些文件不一定都有)的文件拷贝到你的网页文件中
接下来,就是实现效果的时候了
博主将自己的代码和演示效果贴出来:
以上就是我给大家带来的网页中文字效果的内容,第一次更博还有不懂得的地方,希望大家能够指正,博主争取以后给大家带来更好的分享内容
。
首先,我们需要去了解一下text-shadow的相关属性
text-shadow:h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,可为负值;
v-shadow:垂直阴影的位置,可为负值;
blur:模糊的距离;
color:阴影的颜色.
其中blur以及color为可选参数,且text-shadow可以向文本添加一个或多个阴影,之间用逗号隔开。大家想要了解更多的信息可到w3school里面了解更多。
案例一
这里利用text-shadow,可以达到文字突出的效果
下面是CSS代码
body{ background-color: rgba(0,0,0,0.1); } p{ text-align:center; font-size:96px; margin:50px auto; } span{ color: rgba(255,255,255,0.8); text-shadow:0 -1px 1px rgba(0,0,0,0.1), 0 -3px 1px rgba(0,0,0,0.3); }这里为了效果明显,我给text-shadow设置了两个阴影。除了这种凸显的效果之外,text-shadow还可以给文字实现倒影的效果,这里我就不做演示了,大家可以自己动手尝试一下。
静态的有了,那么下面我给大家介绍一下动态的效果。先看一下效果。
文字就像手机的呼吸灯一样,这里利用的css3的animation。下面,我给出关键的css代码:
span{ color:#CD5555; transition: all 0.5s; } p span:hover{ color:white; -webkit-animation: animation1 1.5s ease-in-out infinite alternate; -moz-animation: animation1 1.5s ease-in-out infinite alternate; animation: animation1 1.5s ease-in-out infinite alternate; } @keyframes animation1 { from { text-shadow:0 0 10px #FF6A6A, 0 0 20px #FF6A6A, 0 0 30px #FF6A6A, 0 0 50px #EE6363, 0 0 70px #EE6363, 0 0 90px #EE6363, 0 0 130px #EE6363, 0 0 150px #EE6363, 0 0 180px #EE6363; } to { text-shadow:0 0 5px #FF6A6A, 0 0 10px #FF6A6A, 0 0 15px #FF6A6A, 0 0 20px #EE6363, 0 0 35px #EE6363, 0 0 40px #EE6363, 0 0 55px #EE6363, 0 0 65px #EE6363, 0 0 70px #EE6363; } }
这里运用了CSS3的动画效果animation和过渡transition,我这里简单的给大家说明一下
transition: all 0.5s; all是指过渡的属性,这里大家也可以设置成具体的属性;0.5是过渡时间
a
a631
nimation: animation1 1.5s ease-in-outinfinite alternate;
animation1是指,自己设置的animation名字,也就是动画执行的内容
@keyframes animation1{
from{ //属性开始的状态
}
to{ //属性结束的状态
}
}
1.5s:完成动画的时间为1.5s;
ease-in-out:元素从初始状态到终止状态,先加速再减速;
infinite:动画播放的次数,无限次;
alternate:动画播放方向,在正向播放后,也会反方向播放
知道原理后,大家可以大胆的常识,可能会看到你意想不到的效果。
有了好看的动画效果,那么配上好看的字体是不是很棒。下面,我再给大家介绍一下关于CSS中@font-face的运用。
@font-face{
font-family:'自定义字体的名称';
src:url('自定义字体的存放路径') format('自定义字体的格式');
font-weight:是否为粗体;
font-style:字体样式;
}
由于浏览器的不同,为了能够达到效果,我们还需要设置不同的字体格式
@font-face {
font-family: 'fontname';
src: url(' fontname.eot'); /* IE9 Compat Modes */
src: url(' fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/
url(' fontname.woff') format('woff'), /* 所有现代浏览器 */
url(' fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url(' fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
}
除了@font-face之外,我们还需要一样最重要的东西,就是特殊字体
获得特殊字体,我们需要到一些网站上去下载。博主使用的是Dafont.com,大家可以进入网站中选择自己喜欢的字体样式,然后下载。
下载解压后,打开文件
接下来,我们需要利用第三方软甲或者网站帮助我们去获得@font-face所需的字体格式
博主利用的是fontsquirrel,进入该网站后,我们会看到如下的界面
大家记住红色字体之前一定要打钩哦,然后点击右下角的下载
文件下载解压后,将文件中的.ttf,.otf,.woff,.eot,.svg(这些文件不一定都有)的文件拷贝到你的网页文件中
接下来,就是实现效果的时候了
博主将自己的代码和演示效果贴出来:
@font-face{ font-family: 'stardustDemo'; src:url('fonts/stardust_adventure-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } h3{ text-align: center; font-family:'stardustDemo'; font-size: 96px; } span{ color:#CD5555; transition: all 0.5s; } h3 span:hover{ color:white; -webkit-animation: animation1 1.5s ease-in-out infinite alternate; -moz-animation: animation1 1.5s ease-in-out infinite alternate; animation: animation1 1.5s ease-in-out infinite alternate; } @keyframes animation1 { from { text-shadow:0 0 10px #FF6A6A, 0 0 20px #FF6A6A, 0 0 30px #FF6A6A, 0 0 50px #EE6363, 0 0 70px #EE6363, 0 0 90px #EE6363, 0 0 130px #EE6363, 0 0 150px #EE6363, 0 0 180px #EE6363; } to { text-shadow:0 0 5px #FF6A6A, 0 0 10px #FF6A6A, 0 0 15px #FF6A6A, 0 0 20px #EE6363, 0 0 35px #EE6363, 0 0 40px #EE6363, 0 0 55px #EE6363, 0 0 65px #EE6363, 0 0 70px #EE6363; } }提醒大家一下,font-family中的字体名称是自己定义的,并不是默认的字体样式。
以上就是我给大家带来的网页中文字效果的内容,第一次更博还有不懂得的地方,希望大家能够指正,博主争取以后给大家带来更好的分享内容
。
相关文章推荐
- [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果
- 【HTML5学习笔记】32:CSS3变形效果 下
- 【笔记】css3实现网页平滑过渡效果...
- CSS3学习笔记(3)—左右飞入的文字
- 【HTML5学习笔记】29:CSS3渐变效果
- HTML学习笔记之多媒体网页效果
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- 【HTML5学习笔记】28:CSS3文本效果
- CSS3学习笔记(5)—页面遮罩效果
- 【HTML5学习笔记】31:CSS3变形效果 上
- 前端学习笔记10 使用CSS3进行样式效果增强
- CSS3学习笔记之边框效果
- 响应式网页设计——学习笔记三:CSS3
- [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
- 【HTML5学习笔记】33:CSS3过渡效果
- AXURE 学习笔记 制作“鼠标点击时,输入框内文字消失”效果
- 【HTML5学习笔记】34:CSS3动画效果
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 前端学习笔记--HTML/CSS--网页布局
- [学习笔记]将http网页用tomcat转为https