Css3实现炫酷的打字动画

2019-09-13 郑州网站建设  

利用css3可以实现很多炫酷的东西,下面divcss5小编给大家实现一款炫酷的打字动画。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style type="text/css" media="screen">

        .box {

            width:100%;

            height:500px;

            text-align:center;

            position:relative;

        }

        .container {

            width:80%;

            height:400px;

            border:1px solid red;

            text-align:left;

            margin:0 auto;

        }

        .container span {

            display:inline-block;

            border:1px solid red;

            transition: all 2s;

            transform:translateY(0px) rotate(0deg);

            font-size:14px;

        }

        textarea {

            width:200px;

            resize:none;

            height:20px;

            line-height:20px;

            padding:10px 0px;

            font-size:14px;

            font-weight:400;

        }

        .clone {

            font-size:14px;

            border:1px solid red;

            width:80%;

            height:20px;

            margin:0 auto;

            line-height:20px;

            padding:10px 0px;

            text-align:left;

            visibility:hidden;

        }

        .clone span {

            transition:all 2s;

            position:absolute;

        }

 

    </style>

</head>

<body>

    <div class= "box">

        <div class="container">

 

        </div>

        <div class="clone">

            <span class="inner"></span>

        </div>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2132.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 可以
  • 实现
  • 利用