首页 > 其他分享 >CSS Animation example

CSS Animation example

时间:2024-04-04 23:44:07浏览次数:16  
标签:box 2px 1px Animation rgba shadow example CSS 255

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: hsl(175, 65%, 38%);
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 3);
            animation: yshysh 3s ease-in-out infinite alternate;
        }

        @keyframes yshysh {
            0% {
                opacity: 0.2;
                box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
            }

            50% {
                opacity: 0.5;
                box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
            }

            100% {
                opacity: 1;
                box-shadow: 0 1px 2px rgb(36, 226, 226)
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>

</body>

</html>

标签:box,2px,1px,Animation,rgba,shadow,example,CSS,255
From: https://www.cnblogs.com/iplatform/p/18115345/Animation

相关文章

  • 59.html+css网页设计实例/“美食”主题中华美食介绍/web前端期末大作业/
    一、前言  本实例以“美食”角色为主题设计,应用div+css布局、代码简单,为学生初等水平,是个不错的模板,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二......
  • HTML&CSS
    1.HTML入门1.1.HTML/CSS/JavaScript概述HTML主要用于网页主体结构的搭建CSS主要用于页面元素美化JavaScript主要用于页面元素的动态处理1.2.HTML概述HTML5是什么?HTML5是超文本标记语言(HyperTextMarkupLanguage)的第五个主要版本。这是一种专门用来......
  • HTML和CSS
    Web标准也称网页标准,由一系列的标准组成,大部分有W3C(WorldWideWebConsortium,万维网联盟)负责制定。三个组成部分:HTML:负责网页的结构(页面元素和内容)。CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。JavaScript:负责网页的行为(交互效果)。什么是HTML、CSS?......
  • CSS基础:语法、注释以及注释的3个注意事项
    你好,我是云桃桃。一个希望帮助更多朋友快速入门WEB前端的程序媛。1枚程序媛,大专生,2年时间从1800到月入过万,工作5年买房。分享成长心得。259篇原创内容-公众号后台回复“前端工具”可获取开发工具,持续更新中后台回复“前端基础题”可得到前端基础100题汇总,持续更新中今......
  • 27 个 CSS 案例演示和 DEMO(1),【大牛疯狂教学】
    伪类和伪元素==========4、伪类HTML元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成“悬浮”状态,这时我们就可以利用伪类:hover来选中这一状态的按钮,并对其样式进行改变。:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth......
  • Prompt4Vis: Prompting LLMs with Example Mining and Schema Filtering for Tabular
    本文是LLM系列文章,针对《Prompt4Vis:PromptingLargeLanguageModelswithExampleMiningandSchemaFilteringforTabularDataVisualization》的翻译。Prompt4Vis:使用示例挖掘和模式过滤提示大型语言模型实现表格数据可视化摘要1引言2背景3PROMPT4VIS4......
  • CSS 布局专题
    0x01浮动布局(1)常见网页布局顶部商标栏(Logo):展示网站的标志、名称以及具有代表性的图片导航栏(Navigation):展示网站大概的分类左侧边栏(Left-sideBar):展示网站详细的分类内容栏(Content):展示网站的主要内容右侧边栏(Right-sideBar):展示在网站中比较热门的内容(2)浮动布局概述流......
  • 前端学习思维导图总结~~~CSS篇
    一、前端学习总结CSS部分:二、随记分享这是前端学习过程中总结的思维导图,总结并分享出来,希望给有需要的朋友呀一些帮助,给各位看官一些参考总结的思维导图文件在 主页资源(免费):前端三件套之一:css学习总结思维导图资源-CSDN文库https://download.csdn.net/download/m0_615......
  • 56.html+css网页设计实例/“家乡”主题上海介绍/web前端期末大作业/
    一、前言  本实例以上海为主题设计,div+css布局,页面简单大气,代码精简,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、网页文件三、网页效果以下......
  • 2024年:如何根据项目具体情况选择合适的CSS技术栈
    2024年:如何根据项目具体情况选择合适的CSS技术栈(请注意,这是一篇主观且充满个人技术偏好的文章)方案一:antd/elementui/类似竞品适合情形:项目没有设计师or大部分人不熟悉CSS且项目赶时间。antd自带样式,开发人员无需学习CSS,仅需查看参考文档就可以制作出基本不丑的UI界面。......