CSS - 图片渐显渐隐

文章目录

  • 示例
  • 参考

示例

CSS - 图片渐显渐隐_第1张图片

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片渐显渐隐title>
        <style type="text/css">
            img {
                border-radius: 50%;
                width: 100px;
                height: 100px;
                opacity: 0;
                transition-duration: 2s;
                transition-property: opacity;
            }
            img:hover {
                opacity: 1;
                transition-duration: 2s;
                transition-property: opacity;
            }
        style>
    head>
    <body>
        <img src="img/Winter%20Soldier.jpg" >
        
        <p>
            The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
        p>
        <p>
            The transition-property CSS property sets the CSS properties to which a transition effect should be applied.
        p>
        <p>
            The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
        p>
    body>
html>

参考

Web technology for developers > CSS: Cascading Style Sheets > opacity

Web technology for developers > CSS: Cascading Style Sheets > transition-duration

Web technology for developers > CSS: Cascading Style Sheets > transition-property

你可能感兴趣的:(HTML,&,CSS,&,JavaScript,css)