text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

时间: 2019-02-01阅读: 195标签: 效果

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。
(贫穷使我节省。。。。。。。。。。) 
闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:


看着挺酷炫的还不错 就看了下实现方式。
还挺简单的。

附上demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-fill-color css web前端开发</title>
<style>
html{background: #000;}
.text1{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.text2{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background: url(https://www.apple.com/v/iphone-xs/a/images/overview/copy_texture_1_medium.jpg) repeat center center;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.record{
    color: #737373;text-align: center;font-size: 24px;position: fixed;bottom: 0%;left: 0;width: 100%;padding: 20px 0;
}
</style>
</head>
<body>
    <div class="text1">文字颜色渐变</div>
    <div class="text2">文字遮罩照片</div>
    <p class="record">by Jerry yu </p>
</body>
</html>
            


来自:https://segmentfault.com/a/1190000018087718


实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

css左边竖条的实现方法

问题描述:在只使用一个标签的情况下实现左边竖线。使用border;使用伪元素来实现;内/外阴影;drop-shadow;渐变 linearGradient

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC),关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么

js实现文字上下滚动效果

做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。 要点提示: 1、特效初始化代码

vue实现 toggle显示隐藏效果

jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom元素3.控制页面中的dom元素是从服务端返回,且有多个

简单几步用纯CSS3实现3D翻转效果

作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性 :

css制作从下往上逐渐显示的div

其中div1是整个容器,div2是需要从下往上显示的div。如果只是改变height高度的话,会导致div从上往下慢慢显示,所以并不能直接设置div2的高度来达成效果,此时我们需要一个遮罩mask来帮助div2达成想要的效果。

JavaScript写一个简单的Ps滤镜效果

CSS3多了一个filter的属性,非常强大(兼容性一般)!我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可,写一个过滤属性滑块和输入框,互相绑定值,如果用vue就简单了

CSS实现无外边框列表效果

使用外层容器切割:给每一个 li 设定右边框和下边框线,使用CSS选择器此方法仅适用于每行固定显示两个li的情况,不需要计算宽高,也不需要设置父容器。使用table通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

纯代码为网站站点添加雪花飘落效果

网站站点添加雪花飘落效果,本段js代码依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey 。代码如下:

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全