animation-fill-mode

 /*

animation-fill-mode:what values are applied
by the animation outside the time it is
executing
*/

INDEX.HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>    
    <link rel="stylesheet" href="styles.css">

   
</head>
<body >
    <div class="animation">animation</div>
</body>
</html>

CSS:

/*
animation-fill-mode:what values are applied
by the animation outside the time it is
executing
*/

div {
    width: 200px;
    height: 100px;
    color: white;
    margin:10px;
}

.animation {
    background: green;
    animation: move 5s 2;
    animation-fill-mode: forwards;
}

@keyframes move {
    0% {
        opacity: 0;
    }
    25% {
        transform: translateX(200px);
        opacity: 0.25;
    }
    50% {
        transform: translateX(-100px);
        opacity: 1;
    }
    100% {
        transform: translateX(0px);
        opacity: 0.5;
    }
}





评论

发表评论

此博客中的热门博文

又一款美国免费主机，无限流量动态X10hosting

图片
  X10hosting提供的免费套餐配置如下： 控制面板 空间 流量 顶级域名 SSL FTP 邮箱 数据库 文件数 Cpanel 512M 无限 支持 支持 支持 3个 2个 50000 X10hosting也有高级托管套餐和VPS，分别是$3.95和$8.95起，无其他限制，但是本文我使用的依旧是免费套餐，下面简单测试使用教程和用户体验。 X10的注册 1、在 https://x10hosting.com/#create ，我们选择免费计划，继续到下一个页面。 2、然后直接填写邮箱，点击继续！然后到邮箱收信，点激活链接继续下一步。 3、接下来我们要完成用户和团队的设置，例如填写 网站名称、住址等等，我注册时候没有截图，当然这并不困难。 X10的使用 1、完成注册后，我们登陆地址是  https://x10hosting.com/login-select ，我们刚刚注册的是x10hosting，点击最左边进入即可。 2、接下来我们输入邮箱和密码，点击登陆，到用户仪表盘。然后点击 Add New，添加一个服务，名字随便吧，就是给你的二级域名。 3、点击服务名称即可进入主机管理面板，这里的选项都比较常见，如：SSL、域名设置、php版本管理等等。 4、支持ftp上传文件，注意目录我们要选择：public_html； 5、另外就是X10支持自动安装程序，点击扩展——wordpress，来到softaculous，即可一键安装多达380种程序。哪怕是用它来学习或者选择适合自己的程序，也蛮不错的。 X10使用心得 1、X10的网站设计比较简单，支持中文，我觉得很容易理解； 2、给到的二级域名是*.x10.mx的，实在不适合建站使用，若是想做站点要弄个顶级域来；另外就是空间欧美用户访问比较快（ping在60ms以内）整个英文站也不错。 3、最大的优点是无限流量，妈妈再也不用担心超过限制网站无法访问了！ 综合评分 ⭐⭐⭐⭐⭐ 感觉不错，那就来注册吧~  https://x10hosting.com/#create 视频教程： 哔哩哔哩： https://www.bilibili.com/video/BV188411s7Hu/ YouTube： https://www.youtube.com/watch?v=mNqp-npuZ_A
阅读全文

Nginx【Docker系列】一个反向代理神器——Nginx Proxy Manager

 nginx 安装docker 安装Docker、Docker-compose 更新、安装必备软件 apt-get update && apt-get install -y wget vim 安装docker：非大陆Docker安装 wget -qO- get.docker.com | bash 查看Docker版本 docker -v 开机自动启动 systemctl enable docker 卸载Docker sudo apt-get purge docker-ce docker-ce-cli containerd.io sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/containerd 非大陆Docker-compose安装 sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose docker-compose --version 强烈建议大家专门给Docker的数据、配置文件新建一个文件夹 mkdir -p data/docker_data ---------- docker 安装 nginx mkdir /root/data/docker_data/NPM nano docker-compose.yml 配置代码 version: "3" services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: # These ports are in format <host-port>:<container-port> - '80:80' # Public HTTP Port - '443:44
阅读全文

::Before And ::After Pseudo Elements

图片
/* pseudo elements ::before ::after CONTENT not element content:'' ---required img --- does not work */ INDEX.HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Tutorial </ title >         < link rel = "stylesheet" href = "styles.css" >     </ head > < body >     < p > before and after pseudo element </ p >     < div >         < img src = "./detox.jpg" alt = "" >     </ div > </ body > </ html > CSS:   /* pseudo elements ::before ::after CONTENT not element content:'' ---required img --- does not work */ p::before {     content : "read this -" ;    
阅读全文