zoukankan      html  css  js  c++  java
  • CSS——变换

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>CSS——变换</title>
     6     <style>
     7         @font-face {
     8             font-family: 'MyFont';
     9             font-style: normal;
    10             font-weight: normal;
    11             src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
    12         }
    13         p{
    14             padding: 5px;
    15             border: medium solid cadetblue;
    16             background-color: lightgray;
    17             margin: 2px;
    18             font-size: medium;
    19             font-family: MyFont,cursive;
    20 
    21         }
    22         #first{
    23             display: inline-block;
    24             width: 50px;
    25             font-weight: bold;
    26             border: medium solid black;
    27             background-color: green;
    28             color: white;
    29             padding: 4px;
    30             -webkit-transform: rotate(45deg) scaleX(1.2);
    31             -moz-transform: rotate(45deg) scaleX(1.2);
    32             -ms-transform: rotate(45deg) scaleX(1.2);
    33             -o-transform: rotate(45deg) scaleX(1.2);
    34             transform: rotate(45deg) scaleX(1.2);
    35             transform-origin: left bottom;
    36         }
    37 
    38         #second{
    39             display: inline-block;
    40             font-style: italic;
    41             border: medium solid black;
    42             background-color: orange;
    43             color: white;
    44             padding: 4px;
    45             width: 150px;
    46         }
    47         #second:hover{
    48             transition-duration: 1.5s;
    49             transform: rotate(360deg);
    50         }
    51     </style>
    52 </head>
    53 <body>
    54 <p>
    55     There is a paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing
    56     elit. Ab animi laboriosam nostrum consequatur fugiat
    57     <span id="first">banana</span> at, labore praesentium modi,
    58     quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum
    59     <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur
    60     adipisicingelit. Ab animi laboriosam nostrum consequatur
    61     fugiatat, labore praesentium modi, quasi dolorum debitis
    62     reiciendis facilis, dolor saepe sint nemo, earum molestias quas.
    63 </p>
    64 </body>
    65 </html>
  • 相关阅读:
    查看ORACLE 数据库及表信息
    JDK API文档下载
    Oracle分析函数
    oracle 自定义类型 type / create type
    ORA-00257归档日志写满的解决方法
    关于dbms_output包的使用
    使用状态模式控制 输入内容自动跳转到相应正则表达式文本框
    C# 使用itextsharp 读取pdf中文字坐标
    Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決
    table详解
  • 原文地址:https://www.cnblogs.com/shuqicui/p/2017-3-15-4.html
Copyright © 2011-2022 走看看