美文网首页
css新特性一

css新特性一

作者: 小哪吒 | 来源:发表于2023-12-25 13:40 被阅读0次

CSS Shapes

shape-outside : shape or image
沿着图片内部某个人物或物品的排列方式,具体效果见 https://codepen.io/jinjiang/embed/EMBzpg

image.png
HTML
<div id="container">

  <!-- Using CSS Shapes Module -->
  <!-- https://drafts.csswg.org/css-shapes/ -->
  <img id="photo" role="none" alt="武磊的照片" src="https://c2.hoopchina.com.cn/uploads/star/event/images/190210/29752f55faa730e6615920960b9bc314f5033380.jpg" />

  <h1>武磊</h1>
  <h2>個人信息</h2>
  <ul>
    <li><strong>全名:</strong>武磊</li>
    <li><strong>暱稱:</strong>武球王、中国梅西、核武7</li>
    <li><strong>出生日</strong>期:1991-11-19 (27歲)</li>
    <li><strong>出生地</strong>點:中国江苏南京</li>
    <li><strong>身高:</strong>1.72米</li>
    <li><strong>位置:</strong>前锋/前腰</li>
  </ul>
  <h2>俱乐部信息</h2>
  <ul>
    <li><strong>現在所屬:</strong>西班牙人</li>
    <li><strong>球衣號碼:</strong>24</li>
  </ul>
  <h2>青年隊</h2>
  <ul>
    <li><strong>2003–2005:</strong>根宝足球基地</li>
  </ul>
  <h2>職業俱乐部 <sup>年份:球隊 - 出场 - (进球)</sup></h2>
  <ul>
    <li><strong>2006–2018:</strong>上海上港 - 296 - (151)</li>
    <li><strong>2019–:</strong>西班牙人 - 7 - (1)</li>
  </ul>
  <h2>国家队 <sup>年份:球隊 - 出场 - (进球)</sup></h2>
  <ul>
    <li><strong>2007–2008:</strong>中國U-17 - 8 - (7)</li>
    <li><strong>2009–2010:</strong>中國U-20 - 9 - (11)</li>
    <li><strong>2010–:</strong>中國 - 63 - (15)</li>
  </ul>
  <p>资料来自:<a target="_blank" href="https://zh.wikipedia.org/wiki/%E6%AD%A6%E7%A3%8A">维基百科</a>;图片来自:<a target="_blank" href="https://voice.hupu.com/china/2393068.html">虎扑体育</a></p>
</div>
  body {
  background: #333; color: #eef;
  font-family: sans-serif;
  text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
h1,h2,h3,a { color: white; }
ul { list-style: none; }

#container { width: 1200px; margin: auto; padding: 2em 0; clear: both; }
#photo {
  float: left; width: 100%; border-radius: 10px;
  shape-outside: polygon(0% 0%, 45% 0, 52% 52%, 32% 100%, 0% 100%);
}

css移动效果的写法,效果见 https://codepen.io/Jinjiang/embed/NJZVOm

image.png
HTML
  <input type="range" oninput="change(event)" style="position: absolute;" />
<div id="container">

  <!-- Using CSS Shapes Module -->
  <!-- https://drafts.csswg.org/css-shapes/ -->
  <img id="photo" role="none" alt="武磊的照片" src="https://c2.hoopchina.com.cn/uploads/star/event/images/190210/29752f55faa730e6615920960b9bc314f5033380.jpg" />

  <h1>武磊</h1>
  <h2>個人信息</h2>
  <ul>
    <li><strong>全名:</strong>武磊</li>
    <li><strong>暱稱:</strong>武球王、中国梅西、核武7</li>
    <li><strong>出生日</strong>期:1991-11-19 (27歲)</li>
    <li><strong>出生地</strong>點:中国江苏南京</li>
    <li><strong>身高:</strong>1.72米</li>
    <li><strong>位置:</strong>前锋/前腰</li>
  </ul>
  <h2>俱乐部信息</h2>
  <ul>
    <li><strong>現在所屬:</strong>西班牙人</li>
    <li><strong>球衣號碼:</strong>24</li>
  </ul>
  <h2>青年隊</h2>
  <ul>
    <li><strong>2003–2005:</strong>根宝足球基地</li>
  </ul>
  <h2>職業俱乐部 <sup>年份:球隊 - 出场 - (进球)</sup></h2>
  <ul>
    <li><strong>2006–2018:</strong>上海上港 - 296 - (151)</li>
    <li><strong>2019–:</strong>西班牙人 - 7 - (1)</li>
  </ul>
  <h2>国家队 <sup>年份:球隊 - 出场 - (进球)</sup></h2>
  <ul>
    <li><strong>2007–2008:</strong>中國U-17 - 8 - (7)</li>
    <li><strong>2009–2010:</strong>中國U-20 - 9 - (11)</li>
    <li><strong>2010–:</strong>中國 - 63 - (15)</li>
  </ul>
  <p>资料来自:<a target="_blank" href="https://zh.wikipedia.org/wiki/%E6%AD%A6%E7%A3%8A">维基百科</a>;图片来自:<a target="_blank" href="https://voice.hupu.com/china/2393068.html">虎扑体育</a></p>
</div>

css

body {
  background: #333; color: #eef;
  font-family: sans-serif;
  text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
h1,h2,h3,a { color: white; }
ul { list-style: none; }

#container { width: 1200px; margin: auto; padding: 2em 0; clear: both; }
#photo {
  float: left; width: 100%; border-radius: 10px;
  shape-outside: linear-gradient(110deg, white, transparent);
  shape-image-threshold: .5;
  animation: run .5s;
}
@keyframes run {
  0% { shape-image-threshold: 1; }
  100% { shape-image-threshold: .5; }
}

相关文章

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

  • css新特性一

    CSS Shapes shape-outside : shape or image沿着图片内部某个人物或物品的排列...

  • css新特性

    2017 年要学习的三个 CSS 新特性 新的一年,我们有一系列新的东西要学习。尽管 CSS 有很多新的特性,但有...

  • 前端技能概况

    html 块级元素、行内元素、盒子模型 H5新特性 css css3新特性 flex 布局 动画 js js基础 ...

  • 2020-01-02

    知识点: 1.H5的新特性 css3新特性 2.css的权重,css模块化 3.em,rem的区别 4.值引用,地...

  • 2022css面试题总结

    H5 的新特性 css3 新特性 div 盒子居中 css 的弹性盒模型和怪异盒模型 css 实现三角形 浏览器兼...

  • 2020-01-02

    知识点: 1.H5的新特性 css3新特性 2.css的权重,css模块化 权重: 元素的权重0.类选择器10.i...

  • 三十九、CSS3的新特性(上)

    一、CSS3的新特性 1.1、CSS的现状 新增的CSS3特性有兼容性问题,ie9+才支持。 移动端支持优于PC端...

  • HTML学习笔记(四)

    使用CSS样式表Web标准与CSS网页布局实例CSS3新特性 使用CSS样式表 CSS(Cascading Sty...

  • 2019-05-22记面试

    1.h5和css3的新特性 h5新特性:语义化标签[footer,header,section,nav];; ...

网友评论

      本文标题:css新特性一

      本文链接:https://www.haomeiwen.com/subject/zbdkndtx.html