动画练习demo

最新推荐文章于 2024-04-23 00:56:43 发布

jiepp

最新推荐文章于 2024-04-23 00:56:43 发布

阅读量127

点赞数 1

文章标签： css3动画

本文链接：https://blog.csdn.net/jiepp/article/details/101148614

版权

动画demo

编辑器制作效果展示：

demo

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {background-color: #83C8E5;animation: run 8s infinite}
        .d {width: 150px;height: 150px;border-radius: 50%}
        .d1 {background-color: yellow;animation: run2 8s infinite}
        .d2 {transform: translate(100px, -40px);animation: run1 8s infinite}
        #d {width: 20px;height: 20px;position: absolute;margin: auto;left: -60%;right: 0;top: -80%;bottom: 0}
        @keyframes run {
            from {background-color: #83C8E5}
            50% {background-color: black}
            99.9% {background-color: #83C8E5}
            to {background-color: #83C8E5}
        }
        @keyframes run1 {
            from {transform: translate(100px, -40px);background-color: #83C8E5}
            50% {transform: translate(0px, -150px);background-color: black}
            99.9% {transform: translate(-100px, -260px);background-color: #83C8E5}
            to {transform: translate(100px, -40px)}
        }
        @keyframes run2 {
            from {background-color: yellow}
            50% {background-color: #ff6514;box-shadow: 0px 1px 30px #ff3f3f}
            to {background-color: yellow}
        }
    </style>
</head>
<body>
<div id="d">
    <div class="d d1"></div>
    <div class="d d2"></div>
</div>
<script>
    // 50%{background-color:#FFC116;box-shadow:0px 1px 20px white}
    //box-shadow 当偏移量减少,模糊值增大,会呈现出光环效果
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！

jiepp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画练习demo

动画demo编辑器制作效果展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html {background-colo...
复制链接

扫一扫