开心学习
当前位置：Web前端 > > 正文

css如何制作动画效果（CSS制作三角形广告引导文字效果）

时间：2021-11-03 15:21:02类别：Web前端

css如何制作动画效果

CSS制作三角形广告引导文字效果

街上经常碰到一些发各类广告传单的，有一次收到一张房地产广告的传单，顺手留下来，看着里面有些广告挺吸引人，同时也想练练自己css技术，故抽空做了一下。

原图某区域如下：

css如何制作动画效果（CSS制作三角形广告引导文字效果）

实现上图效果是需要一些想象力的，比如三角形的构成和左右两边的空白间距，懂的这个原理，然后熟练运用border属性，一切就OK了

比如其中一个三角形

css如何制作动画效果（CSS制作三角形广告引导文字效果）

  • XML/HTML Code复制内容到剪贴板
    1. <li class="arrow_ltitle1">  
    2.         </li>  
  • XML/HTML Code复制内容到剪贴板
    1. li.arrow_ltitle1 {   
    2.     width: 0;   
    3.     height: 0;   
    4.     border-top: 35px solid white;   
    5.     border-bottom: 35px solid white;   
    6.     border-left: 25px solid #68C339;   
    7. }   
    8.   

    • HTML代码如下：

  • XML/HTML Code复制内容到剪贴板
    1. <li class="fl arrow_shadow">  
    2.     <li class="arrow_lcontent1 fl">  
    3.         <li style="margin-top: 10px">  
    4.             <li>  
    5.                 低容积率</li>  
    6.             <li>  
    7.                 <b style="font-size: 15pt">仅2.8</b></li>  
    8.         </li>  
    9.     </li>  
    10.     <li class="arrow_ltitle1 fl">  
    11.     </li>  
    12.     <li class="arrow_rtitle1 fl">  
    13.         <li class="arrow_rcontent1">  
    14.             <li>  
    15.                 同样的地块，那里建了10栋楼，这里仅仅7栋，居住舒适度你懂得！</li>  
    16.         </li>  
    17.     </li>  
    18. </li>  
    19. <li class="fr arrow_shadow">  
    20.     <li class="arrow_lcontent2 fl">  
    21.         <li style="margin-top: 10px">  
    22.             <li>  
    23.                 低建筑密度</li>  
    24.             <li>  
    25.                 <b style="font-size: 12pt">仅23.51%</b></li>  
    26.         </li>  
    27.     </li>  
    28.     <li class="arrow_ltitle2 fl">  
    29.     </li>  
    30.     <li class="arrow_rtitle2 fl">  
    31.         <li class="arrow_rcontent2" style="margin-top: 8px">  
    32.             <li>  
    33.                 最大栋距达到近200米，</li>  
    34.             <li>  
    35.                 视觉空间超乎想象！</li>  
    36.         </li>  
    37.     </li>  
    38. </li>  
    39. <li class="empty10">  
    40. </li>  
    41. <li class="fl arrow_shadow">  
    42.     <li class="arrow_lcontent3 fl">  
    43.         <li style="margin-top: 13px">  
    44.             <li>  
    45.                 建材用的贵</li>  
    46.             <li>  
    47.                 品质有保障</li>  
    48.         </li>  
    49.     </li>  
    50.     <li class="arrow_ltitle3 fl">  
    51.     </li>  
    52.     <li class="arrow_rtitle3 fl">  
    53.         <li class="arrow_rcontent3">  
    54.             <li>  
    55.                 含钢量超出市场同类产品约30%，品质有保障，给您一个五星级的家。</li>  
    56.         </li>  
    57.     </li>  
    58. </li>  
    59. <li class="fr arrow_shadow">  
    60.     <li class="arrow_lcontent4 fl">  
    61.         <li style="margin-top: 5px">  
    62.             <li>  
    63.                 临江</li>  
    64.             <li>  
    65.                 瞰岛</li>  
    66.             <li>  
    67.                 官佛</li>  
    68.         </li>  
    69.     </li>  
    70.     <li class="arrow_ltitle4 fl">  
    71.     </li>  
    72.     <li class="arrow_rtitle4 fl">  
    73.         <li class="arrow_rcontent4">  
    74.             <li>  
    75.                 远离噪音污染，</li>  
    76.             <li>  
    77.                 与佛相伴修生养性；</li>  
    78.             <li>  
    79.                 上风上水财运滚滚！</li>  
    80.         </li>  
    81.     </li>  
    82. </li>  
    83. <li class="empty10">  
    84. </li>  
    85. <li class="fl arrow_shadow">  
    86.     <li class="arrow_lcontent5 fl">  
    87.         <li style="margin-top: 5px">  
    88.             <li>  
    89.                 贴近自然</li>  
    90.             <li>  
    91.                 畅想都市</li>  
    92.             <li>  
    93.                 慢生活</li>  
    94.         </li>  
    95.     </li>  
    96.     <li class="arrow_ltitle5 fl">  
    97.     </li>  
    98.     <li class="arrow_rtitle5 fl">  
    99.         <li class="arrow_rcontent5">  
    100.             <li>  
    101.                 太阳岛一墙之隔，</li>  
    102.             <li>  
    103.                 大佛景区近在咫尺，</li>  
    104.             <li>  
    105.                 远离都市尾气生活！</li>  
    106.         </li>  
    107.     </li>  
    108. </li>  
    109. <li class="fr arrow_shadow">  
    110.     <li class="arrow_lcontent6 fl">  
    111.         <li style="margin-top: 13px">  
    112.             <li>  
    113.                 买房装修</li>  
    114.             <li>  
    115.                 一步到位</li>  
    116.         </li>  
    117.     </li>  
    118.     <li class="arrow_ltitle6 fl">  
    119.     </li>  
    120.     <li class="arrow_rtitle6 fl">  
    121.         <li class="arrow_rcontent6">  
    122.             <li>  
    123.                 四川家装连锁品牌芙蓉锦城提供多种精装套餐服务，实体样板呈现，恭迎品鉴</li>  
    124.         </li>  
    125.     </li>  
    126. </li>    

    • CSS样式如下：

  • CSS Code复制内容到剪贴板
    1. body{font-family: 微软雅黑; padding:0; margin:0px auto; width:700px; }   
    2.   
    3. .fl{float: left;}   
    4.   
    5. .fr{float: rightright;}   
    6.   
    7. .empty10{ height:20px; clear:both}   
    8.   
    9. .shadow{-moz-box-shadow: 0 0 20px #777676;box-shadow: 0 0 20px #777676; padding: 5px; background: white;}   
    10.   
    11. .arrow_shadow{-moz-box-shadow: 5px 5px 10px #B7B7B7;  box-shadow: 5px 5px 10px #B7B7B7;}   
    12.   
    13. /*第1个广告样式*/  
    14. li.arrow_ltitle1{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #68C339;}   
    15.   
    16. li.arrow_rtitle1{ position: relative;  width: 0;height: 0; border-top: 35px solid #68C339; border-right: 210px solid #68C339; border-bottom: 35px solid #68C339; border-left: 25px solid white;}   
    17.   
    18. li.arrow_lcontent1{text-align: center; width: 80px; height: 70px;background: #68C339;color: white;font-size: 15px;}   
    19.   
    20. li.arrow_rcontent1{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   
    21.   
    22. /*第2个广告样式*/  
    23. li.arrow_ltitle2{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #E2B32E;}   
    24.   
    25. li.arrow_rtitle2{ position: relative;  width: 0;height: 0; border-top: 35px solid #E2B32E; border-right: 210px solid #E2B32E; border-bottom: 35px solid #E2B32E; border-left: 25px solid white;}   
    26.   
    27. li.arrow_lcontent2{text-align: center; width: 80px; height: 70px;background: #E2B32E;color: white;font-size: 15px;}   
    28.   
    29. li.arrow_rcontent2{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   
    30.   
    31. /*第3个广告样式*/  
    32. li.arrow_ltitle3{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #4381CE;}   
    33.   
    34. li.arrow_rtitle3{ position: relative;  width: 0;height: 0; border-top: 35px solid #4381CE; border-right: 210px solid #4381CE; border-bottom: 35px solid #4381CE; border-left: 25px solid white;}   
    35.   
    36. li.arrow_lcontent3{text-align: center; width: 80px; height: 70px;background: #4381CE;color: white;font-size: 15px;}   
    37.   
    38. li.arrow_rcontent3{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   
    39.   
    40. /*第4个广告样式*/  
    41. li.arrow_ltitle4{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #9C2E8F;}   
    42.   
    43. li.arrow_rtitle4{ position: relative;  width: 0;height: 0; border-top: 35px solid #9C2E8F; border-right: 210px solid #9C2E8F; border-bottom: 35px solid #9C2E8F; border-left: 25px solid white;}   
    44.   
    45. li.arrow_lcontent4{text-align: center; width: 80px; height: 70px;background: #9C2E8F;color: white;font-size: 15px;}   
    46.   
    47. li.arrow_rcontent4{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   
    48.   
    49. /*第5个广告样式*/  
    50. li.arrow_ltitle5{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #403D6F;}   
    51.   
    52. li.arrow_rtitle5{ position: relative;  width: 0;height: 0; border-top: 35px solid #403D6F; border-right: 210px solid #403D6F; border-bottom: 35px solid #403D6F; border-left: 25px solid white;}   
    53.   
    54. li.arrow_lcontent5{text-align: center; width: 80px; height: 70px;background: #403D6F;color: white;font-size: 15px;}   
    55.   
    56. li.arrow_rcontent5{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   
    57.   
    58. /*第6个广告样式*/  
    59. li.arrow_ltitle6{width: 0; height: 0;border-top: 35px solid white;border-bottom: 35px solid white; border-left: 25px solid #EA6F05;}   
    60.   
    61. li.arrow_rtitle6{ position: relative;  width: 0;height: 0; border-top: 35px solid #EA6F05; border-right: 210px solid #EA6F05; border-bottom: 35px solid #EA6F05; border-left: 25px solid white;}   
    62.   
    63. li.arrow_lcontent6{text-align: center; width: 80px; height: 70px;background: #EA6F05;color: white;font-size: 15px;}   
    64.   
    65. li.arrow_rcontent6{color: white;position: absolute;left: 10px;top: -30px;width: 180px;font-size: 15px;}   

    • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    标签：
    文字 广告 css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习