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>
  • 相关阅读:
    发送邮件封装的方法
    异步编程
    Xaml中string(字符串)常量的定义以及空格的处理
    python中lxml的应用
    Python打包成exe
    利用TaskScheduler处理Queue、Stack等类型的操作队列(生产者消费者场景)
    TreeView的性能问题
    WPF中ItemsControl绑定到Google ProtocolBuffer的结构体时的性能问题
    WPF中ToolTip的自定义
    WPF中ItemsControl绑定到Google ProtocolBuffer的结构体时的性能问题
  • 原文地址:https://www.cnblogs.com/shuqicui/p/2017-3-15-4.html
Copyright © 2011-2022 走看看