【css】加载中的光影特效

 

 有的时候图片需要加载时间,速度慢的话图片可能会卡住,这个时候用这个css样式让其好看点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: black;
        }
        img {
            background-color: #1C3C9488;
            position: relative;
            overflow: hidden;

        }
        img::after{
            content: '';
            user-select: none;
            pointer-events: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(135deg, transparent 40%,    #FFFFFF33 50%, transparent 60%);
            background-size:100%  100% ;
            background-repeat: no-repeat;
            animation: au 2s linear infinite;
        }
        @keyframes au {
            0% {
                left: -100%;
            }
            100% {
                left: 200%;
            }

        }
    </style>
</head>
<body>
<img alt="" src="sdfsd" style="height: 200px;width: 600px" width="600" height="200"/>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 我可以为您提供一些参考,您可以利用CSS的animation和keyframe属性来实现加载动画。您可以参考以下代码: ``` <style> .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <div class="loader"></div> ``` ### 回答2: 当用户访问网页时,经常会遇到加载的场景,为了提升用户体验,我们可以通过添加加载特效来提醒用户等待。下面是一个简单的加载特效HTMLCSS代码示例: HTML代码如下: ```html <div class="loading-container"> <div class="loading-spinner"></div> <p class="loading-text">加载,请稍候...</p> </div> ``` CSS代码如下: ```css .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f5f5f5; } .loading-spinner { width: 50px; height: 50px; border: 3px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spinner-rotate 1s linear infinite; } .loading-text { margin-top: 20px; font-size: 18px; color: #666; } @keyframes spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 以上代码实现了一个加载特效效果。当用户访问页面时,会显示一个居的容器,容器心有一个旋转的加载图标,并伴随着一段提示文字“加载,请稍候...”。 加载图标由一个圆形容器和旋转的边框组成,通过CSS动画控制旋转。提示文字使用CSS样式设置了字体大小和颜色。整个特效通过Flex布局实现了居显示,使用户在等待加载时有良好的视觉体验。 你可以根据自己的需求进行适当的修改和美化,比如设置不同的颜色、大小、字体等。希望这个简单的加载特效能对你有所帮助! ### 回答3: 加载特效是一个常见的网页设计需求,通过利用HTMLCSS可以实现一些简单的加载特效。下面是一个基本的加载特效HTMLCSS代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>Loading Animation</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="loader"></div> </body> </html> ``` CSS代码(style.css): ``` .loader { display: inline-block; width: 30px; height: 30px; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 这段代码创建了一个使用CSS动画实现的加载特效。在HTML,我们使用了一个`div`元素,并将样式类名设置为`loader`,这个`div`元素将用来展示加载特效。在CSS,我们使用了`@keyframes`规则来定义一个名为`spin`的动画,从0%到100%之间对元素进行旋转变换,`spin`动画每隔1秒线性无限循环播放。通过为`loader`元素添加`spin`动画,我们可以看到加载特效。 以上代码只是一个简单的示例,你可以根据需要对加载特效进行进一步的定制和优化,例如改变颜色、大小、动画速度等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值