如何利用css制作会闪动的字体

html-css015

如何利用css制作会闪动的字体,第1张

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background-color: #000

            text-shadow: 2px 3px 10px #FF1717

            font-size: 60px

            font-weight:bold

            transition: color 1s

            color: #000

        }

        .color {

            color: #fff

        }

    </style>

</head>

<body>

    <div>我会一闪一闪的</div>

    <script>

        setInterval(function () {

            if (!document.body.className) {

                document.body.className = 'color'

            } else {

                document.body.className = ''

            }

        }, 500)

    </script>

</body>

</html>

如果你想你网站上的文字看起来更加不一样,就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体,如: font-family:Arial但是设置的这种字体,你电脑上必须装有该字体,否则将按原字体样式显示。当然,也可以写上多种字体,当对方浏览你的网站,没有安装第一种字体时,浏览器就会在列表中继续往上搜寻,直到找到有适合的字 体为止,像这样: font-family:Arial,Helvetica,sans-serif在上例中,Web浏览器会先看看是否安装了Arial字体。如果安装了,那么就用Arial字体显示;如果没有安装,浏览器就会继续寻找Helvetica字体;如果还是没有找到,最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时,则必须用双引号(“”)将它们括起来,如: font-family:"Times New Roman",Times,serif以下就介绍几种常用的font-family字体类型组合,每一列的最后都包含一种通用的字体。 1、Serif字体:最适用于冗长的文字信息,因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母一到到下一个字母,阅读起来感觉更加轻松。serif字体包括:Times,Times New Roman、Georgia。 2、Sans-serif字体:它看起来干净而简洁,所有经常被用在标题上。Sans-serif字体包括:Arial、Helvetica、Verdana和Formata。 3、Monospaced字体:它经常用于显示计算机代码,它每个字母都是等宽的。

根据字面意思,给出这种解决方案,看看是否合

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

.box {

width: 400px

display: flex

align-items: center

}

</style>

</head>

<body>

<div class="box">

<p>我是左边文字</p>

<p><img src="images/20150813115845612.jpg" style="width:150px" /></p>

<p>我是右边文字</p>

</div>

</body>

</html>