海上日出(Sunrise)

  • 示例
  • HTML
  • CSS

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div class="sky"><div class="sun"></div>
</div>
<div class="sea"><div class="waves"></div><div class="reflection"></div>
</div>

CSS

body {margin: 0;
}
.sky {display: flex;height: 66.6666vh;background-image: linear-gradient(to bottom, powderblue,pink, white 80%);position: relative;
}
.sun {width: 30vw;height: 30vw;position: absolute;bottom: -8vh;left: 35vw;border-radius: 50%;background-image: linear-gradient( -178deg, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.4) 50%,  rgba(255,255,255,1) 72%),  linear-gradient(-190deg, tomato -10%, lightcoral, navajowhite 70%);filter: blur(1px);
}
.sea {/* png to add noise */background-image: url(data:image/png;base64,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),linear-gradient( to bottom, thistle 30%, powderblue);height: 33.3334vh;position: relative;
/*  filter: blur(1px); */perspective: 80px;overflow-x: hidden;}
.waves {height: 200%;width: 200%;transform: rotateX(20deg);position: absolute;top: -33vh;left: -50vw;/* svg to create waves */background-image: url('data:image/svg+xml,%3Csvg width="36" height="9" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z" fill="white" fill-opacity="0.6" fill-rule="evenodd"/%3E%3C/svg%3E')
}
.reflection {width: 36vw;height: 16vh;background-image: linear-gradient(to bottom, white 20%, navajowhite);margin: auto;border-radius: 50%;opacity: 0.3;filter: blur(18px);position: absolute;left: 32vw;top: -3vh;
}

海上日出(Sunrise)相关推荐

  1. 29/07/2010 sunrise

    ** .. We can only appreciate the miracle of a sunrise if we have waited in the darkness .. 人们在黑暗中等待着 ...

  2. [首发] 多方位玩转“地平线新发布AIoT开发板——旭日X3派(Sunrise x3 Pi)” 插电!开机!轻松秒杀!

    有幸在发布会前拿到了开发板,可以提前对开发板测试,感受下新品AIoT的魅力.(我这个是体验装,不花钱,需要啥设备他们还得给我买→_→) 下面我将以自己的科研项目经历来对这款芯片进行评估,简单来说,就是 ...

  3. 核心单词Word List 43

    词根.词缀表 re- 反 recede vi. 退,退去 prim第一,首要 primitive a. 原始的 ced 走 recede v. 退去,渐渐远去 cit 唤起 recite v. 背诵: ...

  4. mysql shharding_mysql 技术内幕 的示例数据库

    create_president.sql CREATE TABLE president ( last_name VARCHAR(15) NOT NULL comment '名字', first_nam ...

  5. 【图像分类案例】(2) DenseNet 天气图片四分类(权重迁移学习),附Tensorflow完整代码

    各位同学好,今天和大家分享一下使用 Tensorflow 构建 DenseNet 卷积神经网络模型,并使用预训练模型的权重,完成对四种天气图片的分类. 完整代码在我的 Gitee 中,有需要的自取: ...

  6. Laravel:使用Migrations

    1.首先利用artisan创建一个可迁移的数据表模板,该命令运行后会在database/migrations目录下生成一个文件 php artisan make:migration create_fe ...

  7. [转]MCC(移动国家码)和 MNC(移动网络码)

    From : http://blog.chinaunix.net/uid-20484604-id-1941290.html     国际移动用户识别码(IMSI) international mobi ...

  8. Python 快速生成 web 动态展示机器学习项目!

    来源丨网络 作者丨wedo实验君 1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点 你不需要懂html, ...

  9. AI一分钟 | 今天,百度又多了一个好基友华为,还互赠了信物;腾讯AI Lab“肢体动作追踪”技术造出了个“AI 尬舞机”

    图片来源:凤凰网科技 一分钟AI 地平线面向智能驾驶和智能摄像头,推出征程和旭日两款嵌入式人工智能视觉芯片. 百度Apollo无人车队雄安开跑,河北省政府与百度宣布将共同筹建AI国家实验室. 搜狗推出 ...

最新文章

  1. js和html以及css的区别,html、css、js中的区别与关系
  2. 笔记:前端与后台交互
  3. css3让元素自适应高度
  4. Ubuntu18.04安装配置jmol
  5. 在Grails战争中添加“精简” Groovy Web控制台
  6. GitHub 疑遭中间人攻击,最大暗网托管商再被黑!
  7. python 幂运算 整数_在Python中检查一个数字是否是另一个数字的幂
  8. .net core consul 服务配置 服务发现 服务健康检测 服务变更加载
  9. c调用java jar_C#调用java类、jar包方法。
  10. 街头霸王背景_街头霸王与摇滚明星:开放式领导的艺术
  11. mysql-使用存储过程一次性批量创建多张表
  12. JSONObject和JSONArray使用
  13. JavaSE——Java8之函数式接口、函数式编程、Lambda表达式
  14. kubeadm安装k8s测试环境
  15. java朴素贝叶斯_java实现朴素贝叶斯算法
  16. HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)
  17. 爬取12306火车票信息
  18. 华为荣耀计算机在哪,华为荣耀手机如何连接电脑
  19. [爬虫]一个关于课堂派课件的爬虫
  20. 9、Linux文本处理三剑客之sed命令

热门文章

  1. spring项目一启动就自动运行方法(资源加载初始化)
  2. 工业互联网数据展现软件之组态工具
  3. ROS自学实践(11):利用map_server功能包创建自己的地图
  4. Codis的原理以及部署—— CODIS (分布式 Redis 解决方案)
  5. 【Pandas】数据结构Series 基本用法总结
  6. C语言将华氏温度转为摄氏度
  7. 计算机无法识别相机,教您如果戴尔计算机无法检测到相机怎么办
  8. 兰州计算机硬件维修学校,兰州电子工业学校
  9. 计算机进制单位tb以上,计算机容量单位的换算 B,KB,MB,GB,TB
  10. 仓库 store getter